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]:

.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.