how to get product archive to look like this?

specifically:

-this horizontal style layout
– the nice rounded edges
-The yellow ‘Login for price’ button, and the ‘No account yet? Request one’ text
-the barcode under the image display Woo Commerce product ID

Hello,

1- To have the Products in the List view, you can go to Dashboard > Theme Settings > Product archive > Products grid > Shop products view > there you can select the List: https://snipboard.io/pqbryJ.jpg

2- Then you can go to Dashboard > Theme Settings > Product archive > Products styles > there you can enable the Bordered grid and select the style as Inside: https://snipboard.io/MH6awU.jpg

After enabling that, please try using the below Custom CSS code to add the Rounding effect to the Border enabled and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.products-bordered-grid-ins .product-wrapper { border-radius: 20px !important; }

3- To have the condition enabled for the Prices to Login and see them, you can go to Dashboard > Theme Settings > Shop > in that scroll down a bit where you can find Hide add to cart and price > in that you can toggle the available option: Login to see add to cart and prices: https://snipboard.io/c1dsj6.jpg

This previews like this on the Site: https://snipboard.io/4Fqyvt.jpg

4- The Barcode thing couldn’t be possible right now as there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

Best Regards

Thank you so much, that was amazing, it looks 90% of the way I want just a few tweaks I cant figure out:

It wont allow me to edit my last post, but I also wanted to find out how to make side bar background white and add rounded corners to it.

Screenshot attached.

Hello,

1- To make the Background of the Product wrapper white, we have applied the following Custom CSS on your Site:

.products-bordered-grid-ins .product-wrapper { background: #fff !important; }

2- It seems that you have already added the Category Boxes on your Shop page.

3- Regarding the Login to see the price color change, it seems that you have some kind of restriction added for the Shop page that can only be viewed with Login. So, right now we are unable to view the button without Login so we are unable to provide you the CSS for it to change its color.

4- Lastly, regarding adding vertical lines and requesting hyperlinks sorry to say but that wouldn’t be possible right now as you know the Archive pages come from WooCommerce by default and it doesn’t provide an option to do that.

5- The background color of the Sidebar is also changed to #fff.

Best Regards

alright cool, thanks so much.

How about getting each product listing row to be a little smaller, you can see the comparison screenshot, mine are very large

Hello,

We are glad that we could be of some help!

There was a padding-bottom set to 30px on the Products on your Site which we have altered through Custom CSS and set it to padding-bottom: 0 and the gap is reduced which was appearing and now the Products appear like that: https://snipboard.io/CneZGj.jpg

This was the Custom CSS applied on your Site under the Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.product-list-item:not(:last-child) .product-wrapper {
    padding-bottom: 0 !important;
}

Best Regards

[Author]

Posts