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;
}