Menu

Free resources for photographers & creatives

Custom ProPhoto Product Layout

When you want each product to have the highest high level of customization on your ProPhoto website, then you will create unique, custom ProPhoto layouts for each product.

What kind of site does this work for?

This setup is ideal if you manage very few products (less than 5 is best) and each product requires a different page layout and design that is highly customized.

Most importantly, this setup does not pull any of the WooCommerce product information. All content, list pricing, information and images are controlled manually by ProPhoto.

Is this setup for me?

This setup is for you if you need each of your WooCommerce product pages to be highly custom and different from one another but you want to keep the branding consistent across your entire website.

If you don’t need each product layout to be custom and you want WooCommerce product details to get updated automatically (price, description, ect), then use the default WooCommerce Product layout method.

This method only works for single variant options. For example, if you had a t-shirt. with 4 variants for size (small, medium, large, and X-Large) the checkout link can only link to a specific variant. For this reason, this setup is not ideal for products with variant options. Use the default WooCommerce Product layout method if your products have variants.

What do I need to know about this setup?

This setup requires that you create WooCommerce products and assign unique, custom ProPhoto layouts to each product individually.

All information for the product, images and listed price are controlled by ProPhoto manually. WooCommerce will only control the information during checkout. This means if you change the price, title, or description of the product in WooCommerce you will also need to make these changes manually inside the assigned ProPhoto product layout.

Because you must manually create a unique ProPhoto layout for each product there is a lot of manual customization and maintenance required. If you manage more than 5 ProPhoto products this setup could be very time intensive.

Tutorial:

  1. Create a WooCommerce product
  2. Set the product type to “Simple Product”
    1. NOTE: If you want to use a variable or grouped product it is best to use the default WooCommerce Product layout option
  3. Set the price and all WooCommerce product details
  4. Optionally add a description to the product
    1. NOTE: ProPhoto will not display this product description on the page. You will need to manually add this information into the assigned ProPhoto layout.
  5. Publish the product and copy the product ID number
    1. NOTE: If you are in edit mode, look at the page URL. The “post number” is your product ID
    2. NOTE: If you are in product view, hover over your product title to see the the product ID number
  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 the actual product name so you know what type of layout it is
  5. Click the Assignments setting icon for that layout
  6. From the “WordPress Pages” listing click to select the WordPress page you created previously. When it is selected the page will be highlighted in green
  7. Click the blue “save” button (top right)
  8. Navigate to the page 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 layout only.
    2. If there are linked blocks on the page take not 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.
  1. From the ProPhoto menu on the left, click “tiles” then click and drag a tile button onto one of your blocks
    1. If you do not have an existing button available for use click the + Add Tile button
    2. Add the size of the button in the height and width. A good button size is on average width: 150px height: 50px
    3. Add a shape layer and optionally change the color of the shape background
    4. Add a text layer and type your button text into the dialog box.
    5. Optionally change the font styling
  2. Once the ProPhoto tile button is inside your layout block hover over the tile and click the setting icon
  3. Click the tile from the listing and paste the WooCommerce checkout link in the “links to” field
    1. PLEASE NOTE: the ProPhoto customizer will control the appearance of all elements on the product page. You must manually set all product images, pricing, text information and titles. Any changes to the products price in Shopify will also need to be changed manually in your ProPhoto product layout

Add simple product to cart

This will add 1 quantity of product ID “325” to the WooCommerce cart.

/?add-to-cart=325

Add simple product to cart and redirect to cart

This will add the product ID “325” to cart and automatically redirect the customer to the cart page.

/cart/?add-to-cart=325

Add simple product to cart and redirect to checkout

This will add the product ID “325” to cart and automatically redirect the customer to the checkout.

For this to work you must check the “Enable AJAX add to cart buttons on archives” option under WooCommerce –> Settings –> Products -> General and also disable “Redirect to the cart page after successful addition”

/checkout/?add-to-cart=325

Add simple product to cart and redirect to any page

This will add the product ID “325” to cart and automatically redirect the customer to the checkout.

for this to work you must tick the “Enable AJAX add to cart buttons on archives” option under WooCommerce –> Settings –> Products -> General and also disable “Redirect to the cart page after successful addition”.

/your_custom_page/?add-to-cart=325

Add simple product to cart with quantity

This will add “10” quantity of product ID “325” to the WooCommerce cart. You can change the quantity number to any desired number.

/?add-to-cart=325&quantity=10

Add variant and grouped products to cart

We do not recommend using this method or variant or grouped products due to the amount of manual customization and management required; however, it is possible to specifically link variant and grouped products to a WooCommerce checkout. If you are interested in this advanced setup see the variant & grouped linking methods here.

Mark Brand Boutique

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

secure payments by: