CSS Adjustments

Product Catalog layout can be adjusted with a custom CSS. Custom CSS can be placed in WordPress Appearance > Customize under Additional CSS option. Please see below some useful custom CSS snippets:

Product Image

Set the product image to show up on the top instead of in the middle of the box:

.boxed #product_details_container {
display: block;
}

Product Description

Description color:

#product_description {
color: black;
}

Product Tabs

Tab name text color:

.after-product-details h3 {
color: black;
}

Product Name

Add some spacing after product name:

h1.product-name {
margin-bottom: 10px;
}

Product Name on product listing

.archive-listing h3.product-name {
font-size: 13px;
}

Product Listing Name

Hide product listing name or category name on category page:

.product-listing-name {
display: none;
}

Category name

Hide category name on categories listing.

.product-subcategories .archive-listing .product-name {
display: none;
}

Attributes Table on product listing

Make it wider to support more data.

.product-list .al_archive .product-attributes, #content .al_archive .product-attributes, .al_archive .product-attributes {
max-width: 50%;
}

Attributes Table on product page

Make table full width:

.boxed #product_features table {
max-width: 100%;
}

Show label on top of field:

.boxed #product_features table td {
vertical-align: top;
}

Modern Grid

Show one centered item [show_products product="your-product-id" per_row=1]:

.product-list.per-row-1 .modern-grid-element, .product-subcategories.per-row-1 .modern-grid-element {
max-width: 400px;
margin: 1% auto;
float: none;
}

You can adjust the max-width value if you want to have the box bigger or smaller.

Modify the item name box color and font size:

#product_listing .modern-grid-element .product-name {
background-color: #005200;
font-size: 30px;
}

You can adjust the color code and font size values.

Classic Grid

Make images a rectangle:

.classic-grid-image-wrapper .pseudo {
padding-top: 80%;
}

You can change the percentage value to match your image size.

Classic List

Justify short description text:

.list .product-short-descr {
text-align: justify;
}

Product Listing Navigation

Make page navigation without background. It will show up as links, not buttons.

.product-archive-nav li a, .product-archive-nav li a:hover, .product-archive-nav li.active a, .product-archive-nav li.disabled, button.green-box, .product-archive-nav li a:hover, .product-archive-nav li.active a, button.green-box:hover {
background-color: #fff;
color: #000;
}
.product-archive-nav li a, .product-archive-nav li a:active, .product-archive-nav li a:hover, .product-archive-nav li a:link, .product-archive-nav li a:visited, .product-archive-nav li.active a, .product-archive-nav li.disabled {
color: #000;
}

Product Listing Price

To hide product listing price:

.archive-listing .product-price {
display: none;
}

Catalog Filters Bar

To change the filters bar color to white:

.product-sort-bar {
background-color: #fff;
}