By default, WooCommerce will create and add the required page shortcodes to your WordPress website. WooCommerce requires these page shortcodes to appear in your website, preferably each page shortcode on its own page.
- WooCommerce Cart- shows the cart page
- WooCommerce Checkout- shows the checkout page
- WooCommerce Account- shows the user account page
- WooCommerce Order Tracking- shows the order tracking form
These pages and shortcodes will be automatically created for you (if you used the WooCommerce setup wizard).
If you want to further customize the appearance of these pages you are able to do so with ProPhoto layouts. However, keep in mind it is best to keep these pages simple and straightforward so that your customers don’t get confused.
- Review the advanced settings (WooCommerce > Settings > Advanced).
- Check that each WooCommerce page is set up to the correct page from the drop down menus.
- If you need to select a different page, click and select a page from each drop down menu.
If you don’t manually assign each page, ProPhoto will use the “default” or the “initial” ProPhoto layout and assign it to that page.
Your default or initial ProPhoto layout should always include a WordPress Content Module. This will allow ProPhoto to pull the content from the WordPress page and display it in the front end to your users.
If you already have a default or initial layout with a WordPress Content Module then you do not need to do anything to assign the default WooCommerce pages to the ProPhoto layout. This will automatically be done for you.
- Open the ProPhoto customizer
- Click layouts from the left panel
- 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
- 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.
- Once you have the layout (either new or duplicated) click the title of the layout to rename the layout
- PRO TIP: stay organized and rename your layout either “WooCommerce default pages”
- Click the Assignments setting icon for that layout
- click the “WooCommerce Pages” tab on the left and then click each page it should be assigned to. When it is selected the page will be highlighted in green
- Click the blue “save” button (top right)
- Navigate to one of the pages you just linked
- 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
- If needed, delete any unwanted blocks from the page layout or add new blocks to the page
- 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.
- 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.
- 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.
- 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
- Using the module settings, style your WordPress Content to fit your preferences
- 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.
- 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 WooCommerce pages, then each of those pages will apply this layout. ProPhoto will pull the unique WordPress content into the page and display it in this section of the layout.
Selecting an E-Commerce Provider
Setup WooCommerce on your ProPhoto Website
Setup Shopify on your ProPhoto Website