Introduction

WordPress 3.9 has changed the WordPress post editor quite a bit, and integrated TinyMCE 4.0 (the post editor software) directly into the WordPress core. As a result, custom style and shortcode buttons previously in the editor, including the Obox Styles and WooCommerce buttons, no longer appear. Any existing styles and shortcodes in your content will still work and display normally – you just can’t access the quick menus to add these currently.  Both Obox and Woo will be adding alternatives to these old functions in upcoming updates.

In the meantime, you may still add WooCommerce shortcodes manually. The below overview includes the code used to achieve the styles.

The Solution

For general use of WooCommerce shortcodes, see the following article:

How to Setup WooCommerce Pages Using Shortcodes

To verify your WooCommerce shop pages are setup correctly, please continue:

WooCommerce creates a Shop, Cart, Checkout and My Account page for you automatically after installation, as long as you followed the instructions to click the "Create Pages" button (if not, de-activate and re-activate the plugin to trigger this action again, or create the pages manually). These pages may also be loaded by your theme's eCommerce demo content file. It is important that you only have one copy of each WooCommerce page under Pages as they are tied to specific functionality in your shop.
  1. Click on Pages
  2. Determine whether you have any duplicated WooCommerce pages. At a minimum, you need one copy of each of the following:
    • Cart
    • Checkout
    • My Account
    • Shop
    • Terms & Conditions (optional - this is only needed if you are forcing users to accept your terms prior to payment)
  3. If you see duplicates, check the page slug by hovering over the page title, clicking Quick Edit, and looking at the slug field.
    • Delete the version with a number after the slug, ie shop-2, then click on the Trash link and empty the trash.
    • If you notice any remaining pages that have a number in the slug, simply delete it so the slug matches the title, ie. "shop-2" becomes "shop".
  4. If you do not have any of these pages, click on Add New and create one page for each main link using the corresponding shortcode listed here:
    • Cart: [woocommerce_cart]
    • Checkout: [woocommerce_checkout]
    • My Account: [woocommerce_my_account]
    • (optional)Track Order: [woocommerce_order_tracking]
  5. From the main page index, Hover over the Shop page title and click the Quick Edit link (if you don't have a Shop page, create one and proceed to step 6) quick_edit
  6. Select the Shop page template from the Template drop-down and click Update shop_page
    • Note that some themes do not have a special Shop or Product List template (such as Handmade). In these cases simply leave it on Default
    • There is no shortcode for the Shop page.
  7. Edit the Cart, Checkout and My Account pages and choose the Full Width page template, then Publish/Update

Link Pages to WooCommerce

  1. Go to WooCommerceSettings
  2. Click the Products tab and verify the Shop page is selected in the Shop Page drop down
  3. Click the Checkout tab and ensure the Checkout Pages selected
  4. Click the Accounts tab and ensure the My Accounts page selected
  5. Click Save Changes

Still Not Working?

WooCommerce uses dynamic endpoints for generating sub-content of certain pages, such as the Login page, different views of My Account and so on. If you still have issues with 404 errors, weird redirects or nothing happening, check your endpoint settings.

  1. If you are seeing a 404 error (after upgrading perhaps) go to Settings > Permalinks from your WordPress dashboard and ‘save’. This will ensure the rewrite rules for the endpoints exist and are ready to be used.
  2. If using an end point such as ‘view-order’ ensure it specifies an order number. /view-order/ is invalid. /view-order/10/ is valid. These types of endpoint shouldn’t be in your navigation menus.

See WooCommerce Enpoint Documentation for details on what the default endpoints are and how to fix them.

Elementor