How can I customize this design? - by akm_dolar

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

  • Avatar: akm_dolar
    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

    5 Answers
    Avatar: Olga Barlow
    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

    Avatar: akm_dolar
    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

    Avatar: Olga Barlow
    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

    Avatar: akm_dolar
    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

    Avatar: Olga Barlow
    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

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.