Menu

Free resources for photographers & creatives

Customizing the WooCommerce Shop Page

In this lesson we will show you how to create a “shop” page on your ProPhoto website in two different methods:

  • Assign WooCommerce Shop Page Defaults
  • Add WooCommerce shortcode via ProPhoto Layout

Assign WooCommerce Shop Page Defaults

If you want a simple shop page layout and you already have a ProPhoto layout that includes a “WordPress Content Module” then you can quickly and easily assign your ProPhoto layout to your WooCommerce shop page.

Is this setup for me?

This setup is for you if you don’t want to spend a lot of time manually customizing the shop layout and only need to change fonts and colors to match your overall branding.

Tutorial:

  1. Navigate to the backend of your WordPress dashboard
  2. Navigate to WooCommerce > Settings > Products > and from the drop down menu select “Shop
    1. Please note: When you assign the Shop page in WooCommerce no shortcode is needed to display your products. WooCommerce will automatically use the assigned page to display the WooCommerce default shop
  1. Open the ProPhoto customizer
  2. Click layouts from the left panel
  3. Click + add new layout to create a layout from scratch OR hover over an existing layout and click the copy icon to duplicate the layout
    1. PRO TIP: duplicating layouts is a faster way to design a page without having to add the small settings from your website. When you duplicate a layout you can delete out any block you don’t want and keep linked block (such as a header or footer) on the page layout.
  4. Once you have the layout (either new or duplicated) click the title of the layout to rename the layout
    1. PRO TIP: stay organized and rename your layout something recognizable
  5. Click the Assignments setting icon for that layout
  6. Click the “WooCommerce Pages” tab on the left and then click “Shop Page” When it is selected the page will be highlighted in green
  7. Click the blue “save” button (top right)
  8. Navigate to the shop pages you just linked
    1. PRO TIP: click on the page title highlighted in orange and underlined listed in the layout assignments. This will keep the ProPhoto customizer open but navigate you quickly to that page
  9. If needed, delete any unwanted blocks from the page layout or add new blocks to the page
    1. Remember, because you’ve created a new layout the changes you make will not effect the other pages on your website. Adding or deleting blocks will be specific to this Shopify layout only.
    2. If there are linked blocks on the page take note of their linked relationship. Making changes to a linked block on this layout will also cause changes on all other layouts that the block is linked with.
    3. Optionally, you can unlock a block and click “make unique” to copy the block content but make it only unique to that layout page. Any changes you now make will not effect the other linked blocks.
  10. From the ProPhoto menu on the left, click “elements” then click and drag a WordPress Content module (the one with the WordPress logo) onto one of your blocks in the layout
  11. Using the module settings, style your WordPress Content to fit your preferences
    1. PLEASE NOTE: the ProPhoto customizer will not display the parts of the WooCommerce fields in the backend customizer. To see your changes, save the page layout and then click “exit” “view page” to see WooCommerce layout in live view.
    2. Also note that this ProPhoto layout will control all the pages you’ve assigned it to. Meaning, if you assign this layout to all your WordPress product pages, then each of those pages will apply this layout. ProPhoto will pull the info from the WordPress page and display it in this section of the layout.

Add WooCommerce shortcode via ProPhoto Layout

Shortcodes are built-in snips of code that allow you to quickly add WooCommerce content anywhere on your website, pages and posts.

Because ProPhoto supports WooCommerce shortcodes, you can even add WooCommerce shortcodes to your ProPhoto layouts.

If you want a highly customized shop page layout then you can create a custom ProPhoto layout and assign it to your WooCommerce shop page

Is this setup for me?

This setup is for you if you want to add more layout stylings and features to your shop page.

Tutorial:

Follow step two above and then proceed with step three. Please note, you can skip step one as long as you have a designated page in WordPress named “shop” or similar.

  1. Open the ProPhoto customizer and navigate to the layout assigned to your WooCommerce shop page
  2. Click ProPhoto main menu then click “elements” and then click and drag a text module onto the page
  3. Inside the content area paste the WooCommerce product shortcode
    1. NOTE: you can customize this shortcode further by product category, product ID and more

Mark Brand Boutique

Mark Brand Boutique serves photographers, videographers and small business creatives in all 50 states and worldwide.

secure payments by: