From 1634db92cfbffcc978d4e72cda5c8527046e4363 Mon Sep 17 00:00:00 2001 From: John Jago Date: Thu, 11 Jul 2024 17:17:22 -0500 Subject: [PATCH] Make blog post column width optimal for reading; edit CTA I had to go into a few posts to move the images out of lists for the new layout to work where the images can go outside the borders of the reading column on desktop. --- assets/style.css | 9 ++++++++ .../index.md | 12 +++++++--- .../index.md | 4 +++- .../index.md | 16 +++++++++---- .../index.md | 7 ++++-- .../index.md | 7 ++++-- .../index.md | 3 ++- layouts/blog/single.html | 23 ++++++++++--------- 8 files changed, 57 insertions(+), 24 deletions(-) diff --git a/assets/style.css b/assets/style.css index fc300d5..7756c5b 100644 --- a/assets/style.css +++ b/assets/style.css @@ -17,3 +17,12 @@ .img-all-around-shadow img { box-shadow: 0 0 1rem -0.25rem rgba(0, 0, 0, 0.25); } + +.blog-post img { + max-width: min(98vw, calc(100% + 7rem)); +} + +.blog-post p:has(img) { + display: flex; + justify-content: center; +} diff --git a/content/blog/2024-04-17-change-order-status-in-woocommerce/index.md b/content/blog/2024-04-17-change-order-status-in-woocommerce/index.md index 6565455..328b52c 100644 --- a/content/blog/2024-04-17-change-order-status-in-woocommerce/index.md +++ b/content/blog/2024-04-17-change-order-status-in-woocommerce/index.md @@ -26,7 +26,9 @@ summary = 'All the ways you can manually change the order status of an order in Each order in the order list has an **eye icon** next to the name on the order, that when clicked, opens a preview of the order details. Here you can change the order status with a single click. What order statuses are available depends on the current status of the order. -![Screenshot of the WooCommerce order list with an arrow pointing to the eye icon which opens the preview for a given order.](order-list-preview-icon.png) ![Screenshot of the preview window that opens when the eye icon is clicked in the WooCommerce order list.](order-list-preview-open.png) +![Screenshot of the WooCommerce order list with an arrow pointing to the eye icon which opens the preview for a given order.](order-list-preview-icon.png) + +![Screenshot of the preview window that opens when the eye icon is clicked in the WooCommerce order list.](order-list-preview-open.png) If you don’t see the order status you wish to change the order to, you can always click **Edit** and change the order status from there. @@ -34,7 +36,11 @@ If you don’t see the order status you wish to change the order to, you can alw Another option for changing the status of a single or multiple orders is to **check the boxes** next to the orders you wish to change. Then, click **Bulk actions** and select the order status to change all the selected orders to. -![Screenshot of the WooCommerce order list with an arrow pointing to the checkbox for a single order.](order-list-bulk-actions-checkbox.png) ![Screenshot of the WooCommerce order list with an arrow pointing to the bulk actions dropdown.](order-list-bulk-actions-dropdown.png) ![Screnshot of the WooCommerce order list with an arrow pointing to an item inside the expanded bulk actions dropdown.](order-list-bulk-actions-dropdown-open.png) +![Screenshot of the WooCommerce order list with an arrow pointing to the checkbox for a single order.](order-list-bulk-actions-checkbox.png) + +![Screenshot of the WooCommerce order list with an arrow pointing to the bulk actions dropdown.](order-list-bulk-actions-dropdown.png) + +![Screnshot of the WooCommerce order list with an arrow pointing to an item inside the expanded bulk actions dropdown.](order-list-bulk-actions-dropdown-open.png) ## Change order status from the order edit view @@ -44,4 +50,4 @@ If you click into an order from the order list, you’ll go into the order edit ## Conclusion -These are the three ways to manually change an order’s status in WooCommerce. +These are the three ways to manually change an order’s status in WooCommerce. I hope this helps you in learning WooCommerce! diff --git a/content/blog/2024-04-19-show-billing-shipping-in-woocommerce-order-list/index.md b/content/blog/2024-04-19-show-billing-shipping-in-woocommerce-order-list/index.md index f487ea5..2ed4c06 100644 --- a/content/blog/2024-04-19-show-billing-shipping-in-woocommerce-order-list/index.md +++ b/content/blog/2024-04-19-show-billing-shipping-in-woocommerce-order-list/index.md @@ -23,6 +23,8 @@ By default, the shipping and billing address columns are turned off. To turn them on, click the **Screen Options** to open them. Then, check the boxes to show the billing address, shipping address, or both. -![Screenshot of the WooCommerce order list without address columns.](order-list-without-addresses.png) ![Screenshot of the WooCommerce order list with address columns.](order-list-with-addresses.png) +![Screenshot of the WooCommerce order list without address columns.](order-list-without-addresses.png) + +![Screenshot of the WooCommerce order list with address columns.](order-list-with-addresses.png) That’s it! Now you can see the address without clicking into the order. As a bonus, you can also click the shipping address to see it on Google Maps. diff --git a/content/blog/2024-05-15-astra-remove-sale-badge/index.md b/content/blog/2024-05-15-astra-remove-sale-badge/index.md index e663661..4b96b63 100644 --- a/content/blog/2024-05-15-astra-remove-sale-badge/index.md +++ b/content/blog/2024-05-15-astra-remove-sale-badge/index.md @@ -42,16 +42,24 @@ If the theme supports the new WordPress site editor (released in 2022 and becomi 1. Go to your site’s dashboard (log in to WordPress). 2. In the side navigation, go to **Appearance → Editor**. 3. Click on “**Styles**”. - ![Screenshot of the WordPress full site editor after landing on it from the WordPress dashboard.](/blog/astra-remove-sale-badge/site-editor-design.png) + +![Screenshot of the WordPress full site editor after landing on it from the WordPress dashboard.](/blog/astra-remove-sale-badge/site-editor-design.png) + 4. Click the **pencil icon** to edit styles. - ![Screenshot of the WordPress full site editor after clicking “Styles”.](/blog/astra-remove-sale-badge/site-editor-styles.png) + +![Screenshot of the WordPress full site editor after clicking “Styles”.](/blog/astra-remove-sale-badge/site-editor-styles.png) + 5. At the bottom, open “**Additional CSS**”. - ![Screenshot of the WordPress full site editor after clicking the pencil icon to further edit styles.](/blog/astra-remove-sale-badge/site-editor-styles-edit.png) + +![Screenshot of the WordPress full site editor after clicking the pencil icon to further edit styles.](/blog/astra-remove-sale-badge/site-editor-styles-edit.png) + 6. Paste the custom code into the box: ```css .ast-onsale-card { display: none !important; } ``` - ![Screenshot of the WordPress full site editor showing the box where to paste the custom code to hide the Astra sale badges.](/blog/astra-remove-sale-badge/site-editor-css.png) + +![Screenshot of the WordPress full site editor showing the box where to paste the custom code to hide the Astra sale badges.](/blog/astra-remove-sale-badge/site-editor-css.png) + 7. Click “**Save**”. diff --git a/content/blog/2024-05-17-turn-off-coupons-woocommerce/index.md b/content/blog/2024-05-17-turn-off-coupons-woocommerce/index.md index 90d2540..0aa07ea 100644 --- a/content/blog/2024-05-17-turn-off-coupons-woocommerce/index.md +++ b/content/blog/2024-05-17-turn-off-coupons-woocommerce/index.md @@ -20,12 +20,15 @@ If you want to hide the coupon fields from the cart and checkout pages in WooCom Follow these steps to turn off the coupon fields. 1. From the WordPress dashboard, navigate to **WooCommerce → Settings** in the left sidebar. - ![Screenshot of the WooCommerce general settings page, with arrows on how to navigate to it from the left menu in the WordPress dashboard.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-1.png) + +![Screenshot of the WooCommerce general settings page, with arrows on how to navigate to it from the left menu in the WordPress dashboard.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-1.png) + 2. You’ll land on the General tab. 3. Scroll down until you see “**Enable coupon fields**”. 4. **Uncheck** the box labeled “**Enable the use of coupon codes**”. 5. Click “**Save changes**” at the bottom. - ![Screenshot of the field to remove the check from after scrolling down a little on the general settings page in WooCommerce, which will turn off coupons. An arrow is pointing to both the checkbox and the “Save Changes” button.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-2.png) + +![Screenshot of the field to remove the check from after scrolling down a little on the general settings page in WooCommerce, which will turn off coupons. An arrow is pointing to both the checkbox and the “Save Changes” button.](/blog/turn-off-coupons-woocommerce/turn-off-coupons-2.png) Customers will no longer see the coupon fields on the cart and checkout pages. diff --git a/content/blog/2024-05-20-auto-trash-pending-orders-woocommerce/index.md b/content/blog/2024-05-20-auto-trash-pending-orders-woocommerce/index.md index 750b3d2..439817f 100644 --- a/content/blog/2024-05-20-auto-trash-pending-orders-woocommerce/index.md +++ b/content/blog/2024-05-20-auto-trash-pending-orders-woocommerce/index.md @@ -19,10 +19,13 @@ In WooCommerce, it’s possible to delete pending orders, which are unpaid and l 1. From the WordPress dashboard, navigate to **WooCommerce → Settings** in the left sidebar. 2. Open the “**Accounts & Privacy**” tab. - ![Screenshot of the WooCommerce settings page, with arrows pointing to the sidebar where to get to the settings, and then pointing to the Accounts & Privacy tab.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-1.png) + +![Screenshot of the WooCommerce settings page, with arrows pointing to the sidebar where to get to the settings, and then pointing to the Accounts & Privacy tab.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-1.png) + 3. Scroll to the bottom and find where it says “**Retain pending orders**”. 4. You can set the amount of time after which a pending order will be deleted. For example, I set it to 7 days. - ![Screenshot of the bottom of the Accounts & Privacy WooCommerce settings page, where there is an option to choose the amount of time before a pending order is deleted.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-2.png) + +![Screenshot of the bottom of the Accounts & Privacy WooCommerce settings page, where there is an option to choose the amount of time before a pending order is deleted.](/blog/auto-trash-pending-orders-woocommerce/auto-trash-pending-orders-2.png) ## Keep in mind diff --git a/content/blog/2024-05-22-old-woocommerce-reports/index.md b/content/blog/2024-05-22-old-woocommerce-reports/index.md index 40796aa..7b3583b 100644 --- a/content/blog/2024-05-22-old-woocommerce-reports/index.md +++ b/content/blog/2024-05-22-old-woocommerce-reports/index.md @@ -17,6 +17,7 @@ draft = false 1. Go to the WordPress dashboard. 2. On the left, under **WooCommerce**, click **Reports**. - ![Screenshot of the WordPress dashboard, with an arrow pointing to the Reports item under WooCommerce in the left navigation, where the old WooCommerce analytics can be found.](/blog/old-woocommerce-reports/reports.png) + +![Screenshot of the WordPress dashboard, with an arrow pointing to the Reports item under WooCommerce in the left navigation, where the old WooCommerce analytics can be found.](/blog/old-woocommerce-reports/reports.png) Here you’ll see all the old reports for orders, customers, and stock. diff --git a/layouts/blog/single.html b/layouts/blog/single.html index ad021ab..9df1d1f 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -1,19 +1,20 @@ {{ define "main" }} -
+

{{ .Title }}

Published by John Jago

-
+
{{ .Content }}
-
-

Thanks for reading! 🎉

-

We’re the creators of Dashify, a free plugin that gives the WooCommerce admin a fresh look, makes it more intuitive, and adds productivity features needed for high-performing, modern ecommerce stores.

- - Learn about Dashify - +
+

👋 Hey there! We’re the creators of Dashify, a free plugin that gives the WooCommerce admin a fresh look, makes it more intuitive, and adds productivity features for high-performing, modern ecommerce stores.

+
+ + Learn about Dashify + +
{{ end }}