MENU

ProPhoto WooCommerce Setup

Last updated: March 25, 2020
You are here:

Assigning Layouts

Some of our designs include WooCommerce layouts. When you install WooCommerce to WordPress, it should have generated a bunch of standard WC required WordPress pages like:

Shop
Cart
Checkout
Account
Terms & Conditions

In our design, we’ve created layouts for each of those pages that need to be assigned to these pages to work correctly and for you to be able to customize them.

Once you’ve assigned the layouts to their pages (see the below layout assignments for Lumina) you can customize them as you normally would in ProPhoto.

You’ll notice that the “Shop” layout includes assignments to all Product and WC pages as well as the general “shop” page.

WooCommerce Layouts Require at least one WordPress module in them to work. The layous we’ve created in the design already have all this setup for you as blocks. So if you wanted to create a new page, you would simply copy an existing layout (like shop) and customize the copied layout.

Customizing WooCommerce Buttons

Since there’s no way to customize the basic WC buttons, etc in WC or in ProPhoto we’ve added some custom CSS to match the design. To access it, in the shop or any of the other WC layouts, you can hover over the top of the layout and click the settings icon in gray.

There, when the layout popup comes up, SCROLL DOWN to the bottom of the popup to access the CSS area.

We’ve labeled all the CSS to make it easy to understand what we did to customize it.

You can find all the CSS below.

/*WC - Add to Cart Button Color and Size*/
.woocommerce div.product form.cart .button {
  background-color: #975030;
  color: #fff;
 padding: 17px;
}

/*WC - Checkout thumbnail size*/
.woocommerce-cart table.cart img {width: 160px;}

/*WC - Coupon Button Padding*/
.woocommerce .cart .button {padding: 12px;}

/*WC - Add to Cart Button Color On Hover*/
.woocommerce div.product form.cart .button:hover{
  background-color: #444;
  color: #fff;
}

/*WC - Button Colors When Added To Cart*/
.woocommerce .product .add_to_cart_button.button {
     background-color: #975030;
    color: #fff;
}

.woocommerce .product .add_to_cart_button.button:hover {
    background-color: #444;
    color: #fff;
}

/* WC - Money text color and size */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
color: #975030;
font-size: 1.2em;
}

/* WC - On Sale Icon Background Color*/
.woocommerce span.onsale {
background-color:#975030;
padding: 0px;
}

/* WC - Remove Default Results On Shop*/
.woocommerce-result-count,
.woocommerce-ordering {display: none;}

/*WC - Overall  Button Colors*/
.woocommerce button.button, .woocommerce a.button.alt, .woocommerce button.button.alt {
background-color: #975030;
color: #fff;
}

/*WC - Overall Button Colors On Hover*/
.woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
background-color: #444; 
color: #fff;
}

/*WC - Account Sidebar Color and Spacing*/
.woocommerce-account .woocommerce-MyAccount-navigation {
background-color: #F2EDEA;
padding: 15px;
}

/*WC - Field Margins*/
fieldset {margin-bottom: 10px;}

/*WC - Inputs*/
input {padding: 10px;}

If you wanted to change the colors, all you need to do is add your own hexcode in place of the ones in the css. A color hex code looks like this: #F2EDEA; it can also look like this if it’s in shorthand: #fff; or #444;.

Shorthand hex codes can only be added when all 6 of the color code is the same. For instance #fff is white and #000 is black.

WooCommerce Design Settings

You can also change the various design settings in WooCommerce by going into your WordPress dashboard and clicking “Appearance” and “Customize”.

Click “continue” when the notice pops up.

After clicking continue, click “WooCommerce” to bring up all the WC customization options.

Under these settings you can change any of the settings under all the tabs and they’ll work in ProPhoto. The “store notice” tab and settings do not currently work in ProPhoto, which is why we’ve added a store notice as part of your layout in ProPhoto instead.

For Lumina, we did change all the settings in all 3 tabs, but the important one to make sure the images look right is the product images tab. Here are the settings we used in the design below.

Turning off comments/reviews

You may have noticed that comments are enabled on products. In WC those are considered to be “reviews” not comments.

To change this setting, go in your WordPress dashboard, click “settings” > “products” and then “general”.

At the bottom there will be an option to enable/disable reviews. This turns off “comments” for all products.

If this option is enabled, the option will also show up on an individual product to turn on/off as well.

Was this article helpful?
Dislike 0

Still can't find what you're looking for?