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