Remove a Product Variation

Let’s say you want to remove a particular colorway from a variable product. We’ll use the Winterport Throw as an example. First go to the “Edit Product” page for the Winterport Throw, either by doing a search in the back end under products or just going to the front end product page and clicking “Edit Product” in the black bar at the top of the page (you need to be logged in as an admin. to see this bar).

  1. Scroll down to the “Product Data” section of the product page. In the list of blue links on the left-hand side, click “Attributes” then click “Color.” In the “Value(s)” pane on the right, click the “X” next to the colorway you want to remove. Click the blue “Save Attributes” button below.
  2. Now click the “Variations” link (just below “Attributes”) in the left-hand menu. Find the variation that displays “Any Color” in the dropdown (it says this instead of the colorway name because you just removed that color attribute in the previous step). Confirm that this is the right variation to remove by checking the SKU and/or the Description at the bottom of the variation details. Uncheck “Enabled” just below the variation image. Then click the blue “Save Changes” button below the Description.
  3. Scroll back up to the top of the product page and click the big blue “Preview Changes” button in the upper right. A new browser tab opens and you can make sure everything looks good before publishing.
  4. To publish the changes, click the big blue “Update” button on the right. Then click the “Purge from cache” link just to the left.
  5. Go to the front end of the page by clicking the “Permalink” right below the product title at the top and check carefully. Done!

Add a Product Variation

Let’s add a new colorway to the Washable Wool DK yarn. Find that product under “Products” in the WordPress admin (or browse to the front-end product page and click “Edit Product” at the top.

  1. Scroll down to the “Product Data” section of the Edit Product page, click “Attributes,” then click “Color.”
  2. To add an existing color attribute, just click anywhere in the “Value(s)” box containing all the color names and start typing the name of the color you want to add. If the color has been used before anywhere in the store, it will appear in the dropdown selection tool and you can click on it to add it. Then click the blue “Save Attributes” button.
  3. Click the “Variations” link just below “Attributes” on the lefthand Product Data menu to open the Variations section. Then click “Expand” on the upper right to display all the variation details below.
  4. If you’re re-activating a variation that already exists but was out of stock, find it in the list of variations. You can usually identify it by the variation image and/or the “Description” field in the variation details. Once you find it, you’ll need to select the proper color attribute in the dropdown menu that will currently say “Any Color…”.
  5. Make sure the “Enabled” checkbox is checked and “Stock Status” is set to “In Stock.”
  6. Click the “Save Changes” button at the bottom of the Variations.
  7. Click on “Swatches” in the Product Data menu on the left, and then click on the colorway name.
  8. Choose “Image” in the “Attribute Color Name or Image” dropdown.
  9. Then click the “Upload/Add Image” button to access the Media Library and find the image there (use the search function to filter) or add a new image. Then click the “Update” button at the upper right of the Edit Product Page, click “Purge from Cache,” and then check the front end to confirm your changes.

Optimize a Product Category Landing Page for SEO

We’ll use the Baby Blanket landing page to show how to optimize the page for SEO. In this particular case we’re optimizing for a specific Google Ad campaign. Before optimizing any page you need to have done some research and decided on what keyword(s) you’re targeting with this page. A great quick primer on this is https://neilpatel.com/blog/rank-for-multiple-keywords/.

  1. First go to the landing page at https://swansislandcompany.com/product-category/handmade-baby-blankets/ and click on “Edit Category” in the black bar at the top (you have to be logged in to the site to see the black bar).
  2. Scroll down the Edit Category page until you come to the “Yoast SEO Premium” section. Add the focus keyphrase at the top–here we’re using one of the main keywords from a Google Ad campaign that targets this landing page. Then click the “Edit Snippet” button below to edit the SEO Title and Meta Description. Make certain both of these contain the focus keyphrase.
  3. If you want you can add an additional, related keyphrase. Here we’re going to add “baby gift.” Click the “Related Keyphrase” heading below the snippet editor you were just in, and then you can add a new keyphrase.
  4. Yoast evaluates the page based on the focus keyword and offers suggestions. Basically, your aim is to convince Google that this is a quality page that’s highly relevant to the keyword. To check Yoast’s assessment and recommendations, click on “SEO Analysis” to expand that section. Yoast presents an evaluation and offers recommendations. Sometimes they’re not always relevant–for example, in this case Yoast is telling me to expand the page text to 250 words or more, but that would be excessive in the context of a product landing page like this. But definitely make sure that whatever text is on the page contains the keyword and is generally relevant to that topic. Don’t try to mindlessly repeat keywords, just once or twice (if it reads naturally). Ideally, the category name and slug also contains the focus keyphrase. Be careful changing any slugs, though–these have already been indexed by Google. They can be changed but the web server admin. would need to create a “redirect” so no customer ends up getting a “page not found” error.

Remove a Product

  1. To remove a product from the online catalog without deleting it (so it can be quickly restored later), just change the status under “Publish” from “Published” to “Draft” using the dropdown menu. First click the “Edit” button next to the Status as shown below:
  2. Then select “Draft” from the dropdown menu that appears and click the “OK” button just to the right. After that click the large “Update” button below and then click the “Purge from cache” link. Check the front end to be sure the product is no longer visible–do a search for the product by name and there should be no results.

Add a Note to a Specific Product Variation

One way to add a note that you only want to appear when a specific product variation is selected is to add the note to the “Description” field for that variation. The way our current theme is set up, the note appears below the swatches. In this example, we’re adding a note “Ships by June 15” to the Nautical Blue Acadia Blanket in King size only.

  1. First go the the Edit Product page for the Acadia Blanket. Scroll down to the “Product Data” section and click on “Variations” in the left hand list of links. When list of variations appear, find the Nautical Blue in King variation and click on it, which will expand the variation details.
  2. In the details for the variation, find the field named “Description” at the very bottom. Add the “Ships by June 15” text below the colorway name. Now click the “Save Changes” button below the variations, and then click the “Preview” button in the upper right of the Edit Product page to preview the change. If you like what you see, you can click the “Update” button. Once updated, click the “Purge from cache” link next to the “Update” button. The “Ships by June 15” note will only appear when a customer chooses the Nautical Blue color and the King size.

Remove a Product From Clearance

This requires both removing the sale price and also removing the product from the “Clearance” category. We’ll use the Hana Boat Bag as an example of a variable product. It’s the same idea with a simple product but easier because there’s only one SKU to remove the discount price from.

  1. Start by going the Edit Product page for the Hana Boat Bag. Scroll down to the “Product data” section and click on “Variations” in the main menu on the left-hand side. Then click on “Expand” over in the upper right to reveal all the variation details. You should see the “Sale price” field just to the right of the “Regular price” field near the top each variation. Just delete the sale price for each variation.
  2. Next, scroll back up until the “Product categories” section is visible on the right. Deselect the “Clearance” category, then hit the big blue “Update” button just above the “Product Categories” section (or you can “Preview Changes” before updating). After updating the product, click “Purge from cache” just to the right of the “Update” button.
  3. Last step: confirm the changes by viewing the product page on the front end. Make sure the price is displaying correctly and check the “Clearance” is not listed among the categories. To be extra sure you can also go to the “Clearance” page and confirm that the Hana Boat Bag isn’t showing there.

Inventory Management

You can control how WooCommerce handles inventory by configuring the general settings which apply across the entire site, and also product-specific settings. First, let’s take a quick look at the general settings.

  1. Under “WooCommerce” in the main WordPress menu on the left click “Settings” then click the “Products” tab. In the Products settings click “Inventory.” Here you can turn stock managment on or off and configure various options. Most of these are self-explanatory. “Low stock threshold” is the number that stock has to drop to before a warning is emailed to the recipient you specify. “Stock display format” lets you control whether a “Only __ left in stock” message is displayed on the product page.”
  2. Now let’s look at inventory settings for a specific product. We’ll use the Coastal Cowl for this example. Go the the product settings and since this is a variable product click “Variations.” Each individual variation will have its own stock management settings. To have WooCommerce automatically track inventory for that particular variation, first click the “Manage Stock” checkbox. Then enter the amount of that item currently in stock under “Stock quantity.” You have the option to allow backorders or not (and you can choose whether or not to display a message to the customer “available on backorder”).
  3. When the stock drops to 0 on a variation, the swatch for that variation will disappear until stock is replenished (Justin asked for this behavior, which I accomplished with some custom code–the default behavior is for the swatch to be faded out). Below is what the Coastal Cowl product page looks like when the “Coral” variation is out of stock:

Unsubscribe Customer from MailChimp List

Removing someone from the mailing list just takes a few clicks on the MailChimp site. Note that the subscriber’s information is not deleted in case you want to re-subscribe them later.

  1. To unsubscribe a customer from the mailing list, go to the MailChimp homepage and click on the icon for “Audience” in the lefthand navigation menu:
  2. On the Audience page, make sure you have the right audience selected in the dropdown menu. As of now the main mailing list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Manage contacts”:
  3. Click on “Unsubscribe People”:
  4. Copy/paste the email address of the person you want to remove from the list into the “Unsubscribe People” field, then click the “Unsubscribe” button below the field:
  5. That’s it. You should see a confirmation message at the top of the page indicating the person has been unsubscribed:

Add a Customer to MailChimp List

  1. To add a customer to the mailing list, go to the MailChimp homepage and click on the icon for “Audience” in the lefthand navigation menu:
  2. From the Audience dashboard, make sure you have the right audience selected in the dropdown menu. The main list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Add a subscriber”:
  3. Fill in the “Add subscriber” form. The only required info. is the email address, however you can add other info. if you have it. Check both the “Home and Apparel” and “Yarn” checkboxes unless you know the customer is only interested in 1. It’s a good idea also to check the following boxes before submitting the form:  “New Subscriber Onboarding”, “This person gave me permission to email them”, “If this person is already in my audience, update their profile”:
  4. Click the “Subscribe” button to complete the process:

Adjust Gift Card Balance

You can adjust gift card balances in the back end of the website.

  1. Find YITH in the main navigation column on the left and select “Gift Cards” (see screenshot below):
    Gift Car
  2. On the Audience page, make sure you have the right audience selected in the dropdown menu. As of now the main mailing list is called “Swans Island Company Newsletter.” Then under the “Manage Audience” dropdown menu click on “Manage contacts”:
    Gift Card screenshot 2
  3. Adjust the gift card balance by editing the field labeled “Current Balance” (see below):
    Gift Card Screenshot #3
  4. There’s also a field for internal notes that can be useful–only admins. can see this:
    Gift Card screenshot #4
  5. Once you’re done making changes, click the big “Update” button on the upper right:
    Gift Card #5

Making a Gift Card Purchase from the Front End

Here’s how to apply a gift card to a website purchase from the front end, just like a customer would:

  1. After clicking the “Add to Shopping Bag” button to put the item in the cart, hover over the shopping cart icon in the upper right and then click the “View Shopping Bag” button:
  2. On the “Shopping Bag” page, click the link at the top that says “Have a gift card from a loved one? Use it here!”:
  3. Enter the gift card code in the blank form field and then click the button labeled “Apply Gift Card”:
  4. After clicking the “Apply Gift Card” button, a confirmation message will appear and the gift card code will be displayed toward the bottom of the “Cart Totals” column on the right. Note that the gift card value has to be at least as much as the total cost of the item(s) or else the customer will have to pay the balance (if the gift card value exceeds the total cost of the items then the value of the gift card will be reduced by that amount):
  5. Click the “Proceed to Checkout” button below the Cart Totals:
  6. On the checkout page, put the retail store address in the “Billing Details” section to ensure Maine state sales tax is properly applied. Also put “DO NOT SHIP” in the “Order Notes” box. Make sure the “Free Shipping” option is selected so the customer isn’t charged for shipping (this may change to “Pickup order locally” when the free shipping promotion ends). To complete the transaction, click the “Proceed to Payment” button.
  7. After clicking the “Proceed to Payment” button you should see the “Order Complete” page showing all the order details:

Add a Lead Time to a Product

Here’s how to apply a lead time to a product. It’s possible to display a lead time for an in-stock product and/or an out of stock product by reconfiguring the Lead Time settings under WooCommerce settings, but for now let’s just assume we’re only going to display a lead time for out-of-stock products. Let’s start with a simple product like the XL Beach Tote:

  1. Once you’re in the “Edit Product” screen in the back end, scroll down to the “Product Data” box and click on “Inventory”:
  2. On the “Inventory” screen find “Lead Time” and choose “Static,” enter “Ships on 11/23/21” in the “Lead Time Text” field if you want to display a date when the product is expected to ship (you can enter whatever text you want here). Alternatively, you can choose “Dynamic” for “Lead Time” and select a date in the popup calendar–the number of days until the date you select will be displayed:
  3. When the “stock quantity” reaches 0, your “Lead Time Text” will automatically be displayed to the customer on the product page, as in the screenshot below. Note that if you don’t have the “Manage Stock” checkbox clicked in the Edit Product page, the lead time message won’t appear unless you manually set the product stock status to “Out of Stock.” Also note that if you want to enable customers to backorder the product, you can choose “Allow” under “Allow Backorders” and the lead time will appear with the message “Available on Backorder” followed by the Lead time Text you entered.
  4. Now let’s set a lead time for a variable product. It’s similar to a simple product except you can set different lead times for different variations if you like, or you can set a global lead time that would apply to all variations. Let’s use the Penobscot Throw as an example. On the Edit Product page, scroll down to the product data box but instead of selecting “Inventory” select “Variations” instead; then set the “Lead Time” to “Static” and add some text and a date into the “Lead Time Text”:
  5. Click the “Update” button at the top of the Edit Product page and just as with the simple product example above the product page will display your lead time text when inventory reaches 0 (and the same thing applies here about having the “Manage Stock” checkbox checked–if you leave this unchecked then the lead time is only displayed if you manually set the “Stock Status” to “Out of Stock.”). Since this is a variable product and we only set up a lead time for one variation, the lead time message will only display when the customer selects that particular variation, as shown below:
  6. What if you want to set the same lead time for all the variations? In that case you just go to the “Inventory” section of the variable product data and set the lead time there rather than in each specific variation. The global setting in “Inventory” will apply to all variations–unless a variation has its own lead time configured, which will override the global setting.
  7. There are some more advanced global lead time options you can configure in the lead time general settings which you can access using the right-hand menu under “WooCommerce.” Here you can configure where the lead time is displayed (Product Page, Cart, Checkout, etc.). Rather than trying to go through all these various settings here, I’ll just point you to where they are so you can explore them yourself or we can do a Zoom screenshare and discuss. Most of these you probably aren’t going to touch on a regular basis once we have things configured the way you want:

Bulk Edit Products

If you need to make the same change to multiple products–like a percentage price markdown or adding a category–you can make edits to multiple products simultaneously. In this example we’re going to add the “sale” category to all the products with the tag “knit apparel.”

    1. First, hover over “Pickwick Plugins” in the lefthand menu (below “posts”) and click on “PW Bulk Edit.” Then set a filter to just give us the products we want to edit–choose “Tag” for the first dropdown, then “is any of” for the second, and finally “knit apparel”:
    2. Next we’re going to add one other rule or filter to weed out any products that aren’t currently published, so click on the “Add a filter” link below the first dropdown, then set the new filter to “Status” “is any of” “published”:
    3. Now that your filters are set, click the “Search” button and a list of all published products with the “knit apparel” tag will appear below the search button. All the products returned in your search will be preselected–you can deselect any products you don’t want to edit, or just leave them all selected to edit the whole lot:
    4. Next, we’ll scroll horizontally until we see the “Categories” column; click on the word “Categories” then click on “Edit All Check Products” when that appears.
    5. A dialogue box titled “Bulk Edit Categories” will appear; click the “Add to Categories” radio button and then type “Sale” in the blank field to the right; finally, click the “apply” button to add the “sale” category to all the products in the list (but we’re not done yet–changes aren’t published until the final step):
    6. The last step is to click the “Save Changes” button beneath the filters you set earlier. This will assign the category “Sale” to all of the products listed in your search. Go to the “Sale” page to confirm that those products now appear on the page. This is obviously a pretty powerful tool and can save a lot of time–it can also wreak havoc and create headaches if you’re not careful, so review your intended edits carefully before hitting that “Save Changes” button.

Change the Monogram Form on a Product Page

To change which monogram form is displayed on a product page you just have to select the appropriate Gravity Form on the back end of the product page. If you want to display the “Three for Free” promo on the page, there’s an extra step of assigning a tag to the product.

  1. Start by going the product you want to edit. On the “Edit Product” backend page for that product, scroll down to the “Product Data” box and click on “Gravity Forms” in the lefthand column. This will display the Gravity Forms options. At the top is a dropdown menu labelled “Choose Form”–this contains all the Gravity Forms that have been created. Select the form you want, then scroll back up to the top of the page and click the “Update” button.
  2. If you’ve chosen the form named “Add Hand-Stitched Monogram (1st 3 Letters Free!)” and want to display the little promo for this special offer on the product page, all you need to do is assign the tag “free monogram” to the product and the promo will automatically appear on the product page. To add a product tag, go to the right-hand column on the “Edit Product” page and scroll down until you see the “Product Tags” box (right below the “Product Categories” box). Simply type “free monogram” in the blank field at the top and click the “Add” button to the right. If you want to remove the tag from the product, just click the little X in a circle that’s just to the left of the tag. Scroll back up and click the “Update” button on the product page and check the front end to confirm everything looks the way it should. (note: the promo that’s displayed can be edited; it’s in the “UX Blocks” section if you look at the main left-hand column in the website back end and the block is named “Monogram 3 for Free Promo”; here’s a direct link)

Change a Product Image

Every product has a main image associated with it and these are very easy to change.

  1. Start by going the product you want to edit. On the “Edit Product” backend page for that product, scroll down to the “Product Image” which is on the right-hand side of the page just below “Product Tags”.
  2. To change the product image, just click on it and a popup window will appear displaying the current product image in the Media Library. From here you can either choose another image in the media library or upload a new image. If you have a new image, it should be 1000 pixels square and saved in JPEG format.
  3. To upload a new image, click the “Upload Files” tab in the upper left, then either drag the image file into the window or click the “Select Files” button and browse to the new image.
  4. After dragging and dropping or selecting the new image file, add “Alt Text” (a descriptive phrase for the image) and also a “Title” (can just be the name of the product followed by “product image”). These are both in the right-hand column. The last step is to click the “Set Product Image” button in the lower right.
  5. After clicking the “Set Product Image” button, you should see the new product image displayed on the product settings page under “Product Image”.
  6. To publish the new image on the product page that the customer sees, scroll up in the product settings and click the “Update” button in the upper right.
  7. Finally, check the product page on the front end to verify that the new product image is displayed:

Reset the Intuit Payments Connection

Occasionally the website’s connection to the Intuit Payments gateway fails and prevents customers from charging orders to their cards. If that happens, here’s the procedure to reset it. Note that not all failed orders are caused by this issue, sometimes the card gets rejected for various reasons.

  1. If you see a failed order, click into the order details and look at the order notes on the right. If it says “Intuit Payments Credit Card Payment Failed (invalid access token)” then that indicates we need to reset the connection.There’s also usually a notice that appears in the WordPress dashboard that looks like this:
  2. To reconnect, go to WooCommerce settings in the left-hand column of the site admin. and then click the “Payments” tab:
  3. Click the “manage” button next to the “Intuit Payments Credit Card” payment method:
  4. Scroll down to the bottom and click the “Disconnect from Quickbooks” button.
  5. If you get a popup message asking if you really want to disconnect, click OK:
  6. Now the disconnect button should turn green and read “Connect to Quickbooks”; go ahead and click it:
  7. A popup window will appear. Log in with “ed@edgeis.com” as user and use the password I provided (not going to publish it here for security reasons):
  8. When it asks to “Verify Your Number” click “Skip for Now”:
  9. There’s often no confirmation message from Intuit that you’ve reestablished the connection, the popup window just disappears. But you should see the button on the bottom is no longer green and no longer says “Connect to Quickbooks” but instead says “Disconnect from Quickbooks.”
  10. I usually hit the “save changes” button at the very bottom as the final step.
  11. Test that the credit card payments are working by buying an item with a credit card (I usually get an $8 pattern).

Designate Default Size and Color for Variable Products

You can designate a default size and/or color for a variable product so that the size/color will be selected by default when a visitor views the product.

  1. To set a default size and/or color for a product, go to the “Product Data” section of the product settings and select “Variations”:
  2. At the top of the Variations section you’ll find “Default Form Values” followed by two dropdown menus, one for size and one for color:
  3. Select the desired options. In this case, we’re designating a default size of Queen and leaving color unspecified:
  4. Once you’ve made your default selections, click “Save Changes” button at the bottom of the “Product Data” section, then click the “Update” button at the upper right of the product settings page. Check the front end page (what the customer sees) to verify that the default options you chose are selected:

Change a Swatch Image

Swatches are configured in the “Swatches Settings” area of the “Product data” box when editing any variable product.

      1. Click on the “Swatches Settings” link in the right-hand column of the “Product data” box, then click on “Color” in the list of settings, and finally click the color you want to configure the swatch for:
      2. To change the swatch image, click the “Upload/Add Image” button:
      3. After you click “Upload / Add Image” a box will open up showing the Media Center. You can either choose an existing image or upload a new one. Use the search button to locate swatch images. In the example below I’m searching for “dusk swatch.” To select the swatch just click on it and then click the “Use Image” button in the lower right:
      4. The box with the media center will close after you click “Use Image.” To finalize your changes, click the “Save Swatches Settings” button below the list of swatches, then click the “Update” button in the upper right of the product page. Check the front end to make sure your swatch is correct.