Return to previous page

Is it possible to use an icon instead of text in Design type: Default when the setting: Add to cart

This topic has 24 replies, 2 voices, and was last updated 3 months, 4 weeks ago ago by Luca Rossi

  • Avatar: Goostaf
    Goostaf
    Participant
    December 13, 2024 at 17:45

    Sorry for the many questions..Is it possible to use an icon instead of text in Design type: Default when the setting: Add to cart with quantity is turned off? If we turn this option on, instead of text there will be a cart icon, but we don’t need this feature, and we want to see an icon instead of text to fit in front of the price, is it possible?

    Files is visible for topic creator and
    support staff only.
    #427537 Copied Theme version: 9.4.5
    23 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    December 16, 2024 at 09:48

    Hi @Goostaf,

    The fastest way is using the custom CSS codes, please try adding this custom CSS codes:

    
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 6px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 6px;
}

    https://prnt.sc/qG7CC5PofNhD

    Let us know how it goes!

    #427643 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    December 16, 2024 at 14:34

    Thanks, is it possible to square the button? It’s like it’s rectangular now, the same as when Add to cart with quantity is enabled

    #427699 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    December 17, 2024 at 07:54

    Dear @Goostaf,

    We can force the width & height of the buttons:

    
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
    width: 40px;
    height: 40px;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 8px;
}

    https://prnt.sc/JxTkkEqCMRkw

    Hope it helps!

    #427756 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    December 19, 2024 at 09:21

    its thanks, but now how to move to the right against the price, so that it would be the same as with the enabled setting Add to cart with quantity (screenshot)

    Files is visible for topic creator and
    support staff only.
    #428050 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    December 19, 2024 at 10:05

    Hi @Goostaf,

    Please use this custom CSS codes:

    
.product-details {
    max-height: 100px;
}
.product-details .add_to_cart_button {
    text-indent: -99999px;
    position: relative;
    width: 40px;
    height: 40px;
    top: -45px;
    float: right;
}
.product-details .add_to_cart_button::before {
    content: "\e93e";
    font-family: xstore-icons;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 1;
    text-indent: 0;
    font-size: 18px;
    top: 8px;
}

    https://imgur.com/Vt5PLFn

    Best Regards,
    The 8Theme Team.

    #428055 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 9, 2025 at 20:42

    Thanks, it’s really very similar, but the only question is about the button text (text-indent: -9999999px;), we are basically hiding it just, but it remains in the code, if you can cut it out, that would be great

    #433868 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 10, 2025 at 06:49

    Dear @Goostaf,

    We would like to inform you that removing this text may cause issues with the layout.

    To ensure the proper display and functionality, we recommend keeping the custom CSS codes as they are.

    Thank you for your understanding.

    Best regards,
    8Theme Team

    #433881 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 10, 2025 at 13:27

    It would be great if you could still use the card view: just a button with a cart icon without quantity selection, but now you can do it only with the setting: Add to cart with quantity, but you don’t need quantity selection in the catalog, you have to hide it with all sorts of hooks.

    #433941 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 11, 2025 at 05:52

    Dear @Goostaf,

    We are currently a bit unclear about your request.

    Could you kindly clarify what you would like to achieve? Additionally, we would appreciate it if you could activate the necessary settings.

    Thank you for your time and assistance.

    Best regards,
    8Theme Team

    #433988 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 11, 2025 at 08:31

    I just wanted to be able to display the product just an icon in the add to cart button, without text on it, now it is possible only with the option: Add to cart with quantity, but we do not need it. You do not have the option of just a button with an icon in the settings, unless through css as we have done, but we just hid it with styles, but in fact all the code remained unnecessary.

    Files is visible for topic creator and
    support staff only.
    #433999 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 12, 2025 at 09:03

    Dear @Goostaf,

    Thank you for reaching out to us.

    If the custom CSS solution does not fully meet your expectations, we kindly encourage you to share your suggestion on our Taskboard at (https://www.8theme.com/taskboard/). Should your idea receive significant support from other customers, our development team will carefully assess its feasibility for inclusion in a future update.

    We appreciate your feedback and look forward to your valuable suggestions.

    Best regards,
    The 8Theme Team

    #434108 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 12, 2025 at 09:10

    Thank you, your solution via css works for us, but if there is a possibility to hide pieces of code for each card that are not needed now, it will be just great:) This is the quantity code just like that, if I understand correctly

    Files is visible for topic creator and
    support staff only.
    #434111 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 12, 2025 at 10:24

    Dear @Goostaf,

    We hope you are doing well.

    Could you please copy the following file from the parent theme to the XStore child theme, ensuring it is placed in the same directory?

    File Path:
    /wp-content/themes/xstore/woocommerce/content-product.php

    Once the file has been copied, kindly remove the following line at line 912: 

    
woocommerce_quantity_input( $q_args, $product, true );

    We hope this helps. Please let us know if you need any further assistance.

    Best regards,
    8Theme Team

    #434117 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 12, 2025 at 10:41

    Deleted it, really haven’t seen the result yet:)

    Files is visible for topic creator and
    support staff only.
    #434121 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 12, 2025 at 10:48

    And I also when I create the same file in a child theme, I have icons shifted to the left, so I tried removing your code and in the main file, not the child and still no luck

    Files is visible for topic creator and
    support staff only.
    #434122 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 12, 2025 at 21:18

    I apologize, the code worked, it removes a piece of code needed, but only the button moves the cart to the left now, can it be put back in place only? I have returned the code, apparently for the button you need to correct your code, which you gave me to move the button to the right.

    Files is visible for topic creator and
    support staff only.
    #434180 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 13, 2025 at 08:55

    Dear @Goostaf,

    We hope you are doing well.

    Could you please copy that file to the child theme again? Once it is in place, we will be able to provide the necessary custom CSS codes.

    Additionally, the button has now been restored to the right position:
    (https://prnt.sc/TqcUruN2x43X)

    Please let us know if you need any further assistance.

    Best regards,
    The 8Theme Team

    #434198 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 17, 2025 at 10:27

    We seem to have mixed up the topics:) you answered me on this topic here: https://www.8theme.com/topic/how-to-hide-the-product-quantity-selection-on-the-bottom-panel-in-a-product/#post-434505, and there was a slightly different question, I confused you, I apologize, I apologize

    Yes, the code works for the category, thanks:

    (.products-grid .product-details .button:not(.compare) {
    right: 0;
    position: absolute;
    })

    only thing left to solve it on the main page, there must be a different file there, content-slider maybe?

    #434542 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 18, 2025 at 08:44

    very much looking forward to hearing back, your code didn’t work on the home page:)

    #434638 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 18, 2025 at 08:46

    Hi @Goostaf,

    Please also copy this file to child theme: /wp-content/themes/xstore/woocommerce/content-product-slider.php.

    Take a look at this line 789:

    
woocommerce_quantity_input( array(
                                'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product )
                            ), $product, true );

    Hope it helps!

    #434639 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 18, 2025 at 11:39

    The code didn’t work, only on categories, how to align buttons on the main page too?

    .products-grid .product-details .button:not(.compare) {
    right: 0;
    position: absolute;
    }

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    #434656 Copied
    Avatar: Goostaf
    Goostaf
    Participant
    February 18, 2025 at 19:12

    Solved:

    .product-slide .product-details .quantity-wrapper .button, .product-grid .product-details .button:not(.compare) {
    right: 0;
    position: absolute;
    }

    #434703 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    February 18, 2025 at 19:49

    Glad you’ve sorted it out.

    Should you require any further assistance, please do not hesitate to contact us.

    Best Regards,
    8Theme’s Team

    #434705 Copied
  • Viewing 24 results - 1 through 24 (of 24 total)

The issue related to '‘Is it possible to use an icon instead of text in Design type: Default when the setting: Add to cart’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity
Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Jewellery Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Finances – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Concert Store – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme

See All Templates

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