create a custom appearance for the product card

We have a request from our customer to create a custom appearance for the product card (as it appears on the product grid). This is solely for the grid and not the product page layout.
The brief is analyzed in the following points (and we also have the corresponding points on a screenshot below):
A. For the secondary images we would like to have bullets (center – bottom) as shown on the first image. For the responsive part (mobile – tablet) we would like to have left and right finger-scrolling and not the arrows (because they are very small for the fingers)

B. All the product info should go below the card, as shown in the second image

C. The wishlist heart and the quick buy minicart should be on the right side of product info, as show in the second image

D. The product title font should become more bold (increase weight?) Just for the title, not the prices etc

E. Product Discount and product tags (like new, sold-out etc) should appear without background on the top-left side of the product image. As shown in third image.

F. Therefore, on the image only discount – tags – gallery bullets

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards.

I send you

Hello,

01. Sorry to say there is no option in theme settings available for that. Navigate to Theme Settings > Product Archive > Products Styles > Enable the option Product gallery and configure the “Product gallery controls”.

02. Navigate to Theme Settings > Product Archive > Products Styles > Choose the Product Styles and choose the elements that you want to show.

03. Define the code below in Theme Settings -> Custom CSS -> Desktop CSS area.

.product-grid-item .wd-buttons.wd-pos-r-t {
top: 280px !important;
}

For the mobile device, Add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS for Mobile sections:

.product-grid-item .wd-buttons.wd-pos-r-t {
top: 150px !important;
}

04. Navigate to Theme Settings > Typography > Advanced and you can assign Product Grid title selector to change font-size value https://prnt.sc/TUGmKqBkCa2L.

05. Navigate to Theme Settings > Shop > Products Labels > “Sale” label background > Add the transparent color code. For the other labels you can use the Transparent background.
rgba(255,255,255,0)

Best Regards

Sorry can you help me for this;

Hello,

Can you share some screenshots for better understanding where you have faced the issue so I will check and give you a possible solution?

Best Regards.

We have a request from our customer to create a custom appearance for the product card (as it appears on the product grid). This is solely for the grid and not the product page layout.
The brief is analyzed in the following points (and we also have the corresponding points on a screenshot below):
A. For the secondary images we would like to have bullets (center – bottom) as shown on the first image. For the responsive part (mobile – tablet) we would like to have left and right finger-scrolling and not the arrows (because they are very small for the fingers)

B. All the product info should go below the card, as shown in the second image

C. The wishlist heart and the quick buy minicart should be on the right side of product info, as show in the second image

D. The product title font should become more bold (increase weight?) Just for the title, not the prices etc

E. Product Discount and product tags (like new, sold-out etc) should appear without background on the top-left side of the product image. As shown in third image.

F. Therefore, on the image only discount – tags – gallery bullets

Attachments:

You must be logged in to view attached files.

Hello,

I have already replied to you on these topics. Please read our previous reply and make changes.

Best Regards.

1) For the secondary images we would like to have bullets (center – bottom) as shown on the first image.

2) For the responsive part (mobile – tablet) we would like to have left and right finger-scrolling and not the arrows (because they are very small for the fingers)

The number 1 you can’t…..
The number 2 can you help me?

Thanks

Hello,

Sorry but there is no option in Theme Settings available for that.

It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

[Author]

Posts