Menu

Free resources for photographers & creatives

Customizing the WooCommerce Default Product Layout

When you want an easy, traditional setup for your WooCommerce products simply use the default WooCommerce product layout.

Using custom CSS inside ProPhoto you can customize the default WooCommerce Layout to match your preferences.

What kind of site does this work for?

This setup is ideal if you manage small to large size online store with products that may have product variations and you want a simple, consistent product layout that doesn’t require a lot of maintenance.

What can be customized with CSS

  • WooCommerce button colors & styles
  • WooCommerce fonts of headings and body
  • WooCommerce default color of list price
  • WooCommerce sales badge

What can’t be customized with CSS

  • Functionality of the product gallery
  • Arrangement of the WooCommerce details tabs (by default the details tabs will be listed below the product images and short product descriptions)
  • Location of the list price (default is located to the right of the product images)

Is this setup for me?

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

What do I need to know about this setup?

This setup requires that you create a ProPhoto layout assigned to “WooCommerce Product.” This ProPhoto layout must include a “WordPress Content Module on the Page.”

Using CSS, ProPhoto can visually change the font and color stylings of the WooCommerce defaults BUT will not be able to rearrange elements on the page.

Tutorial:

  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 either “WooCommerce Products”
  5. Click the Assignments setting icon for that layout
  6. click the “Products” tab on the left and then click “All product pages.” When it is selected the page will be highlighted in green
  7. Click the blue “save” button (top right)
  8. Navigate to one of the product 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 unique WooCommerce product content into the WordPress page and display it in this section of the layout.
  1. Open the ProPhoto customizer and navigate to the layout assigned to your WooCommerce products
  2. Hover over the WordPress Content Module (highlighted in purple) and click the setting icon
  3. A new window will open with the ProPhoto font and formatting settings
  4. Click the tabs on the right “Heading Styles” or “content styles” and from the font dropdown fields select your preferred font style
    1. Pro Tip: want to create a new font style? Simply click the font dropdown and then click the copy button. Click one of the fonts to copy. It will automatically open the font settings on the left ProPhoto panel. Quickly change the font size, color, and styles without having to create the font from scratch.

Editing the WooCommerce button styles requires custom CSS. Follow along to edit the WooCommerce button style site wide.

  1. Open the ProPhoto customizer and click “Settings” from the left panel
  2. Click “Advanced” from the list and then click “Custom Code
  3. Paste the following code in the “Site-Wide Custom CSS” text field box
    1. NOTE: Change the colors to your brand colors
    2. NOTE: The button font will be controlled by the ProPhoto assigned default body font. You may use additional CSS to change the font stylings specific to this button
    3. NOTE: there are two CSS classes we are targeting: the standard class and the :hover class
/* Change background and font color of all WooCommerce buttons */

/* replace "black" with your own button color */

.woocommerce .button {
background:black !important;


background-color:black !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:black !important;

}

/* Change hover styles of all WooCommerce Buttons */

.woocommerce .button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.
  1. Open the ProPhoto customizer and click “Settings” from the left panel
  2. Click “Advanced” from the list and then click “Custom Code
  3. Paste the following code in the “Site-Wide Custom CSS” text field box
    1. NOTE: change the color to your preferred color

/* Changes WooCommerce price color */
.woocommerce ul.products li.product .price {
color: #8d8d8d;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
color: #8d8d8d;
}

  1. Open the ProPhoto customizer and click “Settings” from the left panel
  2. Click “Advanced” from the list and then click “Custom Code
  3. Paste the following code in the “Site-Wide Custom CSS” text field box
    1. NOTE: change the color to your preferred color

/* Customize color of WooCommerce store notice */

.woocommerce-store-notice {
background-color: #666f7a;
}

  1. Open the ProPhoto customizer and click “Settings” from the left panel
  2. Click “Advanced” from the list and then click “Custom Code
  3. Paste the following code in the “Site-Wide Custom CSS” text field box
    1. NOTE: change the color to your preferred color

/* Customize WooCommerce Product sales badge */

.woocommerce span.onsale {
min-width: 3.636em;
background-color: #DAA585;
}

  1. Open the ProPhoto customizer and click “Settings” from the left panel
  2. Click “Advanced” from the list and then click “Custom Code
  3. Paste the following code in the “Site-Wide Custom CSS” text field box
    1. NOTE: change the color to your preferred color

/* Changes WooCommerce icon colors*/
.woocommerce-info::before {
color: #acb5c0;
}
.woocommerce-message::before {
color: #acb5c0;
}

/* Changes the WooCommerce banner message banners*/
.woocommerce-error, .woocommerce-info, .woocommerce-message {
border-top-color: #daa585;
border-top: 3px solid #daa585;
}

Mark Brand Boutique

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

secure payments by: