Return to previous page

How can I customize this design? - by akm_dolar

This topic has 6 replies, 2 voices, and was last updated 3 years, 8 months ago ago by Olga Barlow

akm_dolar

Participant

March 11, 2021 at 00:00

Recently I have seen a products card design. Can you tell me that how can I customize it? check the screenshot: https://prnt.sc/10icdrs

#278735 Copied Theme version: 7.2.4

5 Answers

Olga Barlow

Support staff

March 11, 2021 at 15:16

Hello,

This is a built-in List layout of the product card. Could you, please, explain in more detail what exactly do you want to customize? Do you want to change the font-size/color or add/remove any additional elements?

Regards

#278833 Copied

akm_dolar

Participant

March 11, 2021 at 18:04

Yes, I want to add an element like this. how can I make it? https://prnt.sc/10izlde

#278873 Copied

Olga Barlow

Support staff

March 11, 2021 at 19:00

Hello,

Unfortunately, we don’t have a special element to display products in this way. So, it requires additional customization. You can submit customization request here.

Regards

#278901 Copied

akm_dolar

Participant

March 11, 2021 at 19:13

Okay fine, Then may I customize it? https://prnt.sc/10j0tay I want to remove the button and price. and want to add products SKU and short details

#278906 Copied
Olga Barlow

Support staff

March 15, 2021 at 11:04
Hello,

Take my apologies for the delay in answering.
Do you want to hide button and price for the grid view only and for one Elementor Product element on the page or for all the product elements and no matter if this is the list or grid type of view?

To enable short description use the element settings https://prnt.sc/10m6ddo
To display SKU you can use WooCommerce hooks https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ and add the below code to child theme functions.php
```
/**
* Adds product SKUs
**/
function ettheme_shop_display_skus() {

global $product;

if ( $product->get_sku()) {
echo '<div class="product-meta">SKU: ' . $product->get_sku() . '</div>';
}
}
add_action( 'woocommerce_after_shop_loop_item_title', 'ettheme_shop_display_skus', 9 );
```
Regards
#279335 Copied
Viewing 6 results - 1 through 6 (of 6 total)