[Skip to main content](#vessel-content) # Change "Add to cart" button to icon ## - **[bmichu](/forum/user/32093-bmichu "View bmichu's Profile")** - [![bmichu's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32093-bmichu "View bmichu's Profile") Topic Author - [ Offline](/forum/user/32093-bmichu) Less More - Posts: 71 - Thank you received: 0 - - 12 years 5 months ago - 12 years 5 months ago [\#156250](#156250) by [bmichu](/forum/user/32093-bmichu "View bmichu's Profile") *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#156250 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* was created by *[bmichu](/forum/user/32093-bmichu "View bmichu's Profile")* Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? [ ![h262414e_2014-05-19.PNG](/forum/attachment/17316) ](/forum/attachment/17316 "...2014-05-19.PNG") Thanks! Michel - [ ![h262414e.PNG](/forum/attachment/17315) ](/forum/attachment/17315 "h262414e.PNG") [ ](/forum/attachment/17315?download=1 "h262414e.PNG") - [ ![h262414e_2014-05-19.PNG](/forum/attachment/17316) ](/forum/attachment/17316 "...2014-05-19.PNG") [ ](/forum/attachment/17316?download=1 "...2014-05-19.PNG") Last edit: 12 years 5 months ago by [bmichu](/forum/user/32093-bmichu "View bmichu's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86322 - Thank you received: 14281 - - 12 years 5 months ago [\#156257](#156257) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#156257 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* Hi, It's a matter of CSS styling. For example, on our demo website we uses that CSS to personnalize the add to cart buttons: Code: .hikashop_product_quantity_main .hikashop_product_stock .button { color: #167e93 !important; font-weight: bold; background-image: url(../images/add_cart.png); background-repeat: no-repeat; background-position: right; height: 32px; padding-right: 40px !important; background-color: transparent; cursor: pointer; } [ demo.hikashop.com/index.php?option=com\_h...ra-cabriolet&lang=en](http://demo.hikashop.com/index.php?option=com_hikashop&ctrl=product&task=show&cid=63&name=porsche-carrera-cabriolet&lang=en) Here is some documentation which explains how to add/edit your HikaShop CSS: [ www.hikashop.com/support/support/documen...ize-the-display.html](http://www.hikashop.com/support/support/documentation/153-customize-the-display.html) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[makles](/forum/user/2685-makles "View makles's Profile")** - [![makles's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar2685.JPG)](/forum/user/2685-makles "View makles's Profile") - [ Offline](/forum/user/2685-makles) Less More - Posts: 17 - Thank you received: 0 - - 12 years 4 months ago [\#158820](#158820) by [makles](/forum/user/2685-makles "View makles's Profile") Replied by *[makles](/forum/user/2685-makles "View makles's Profile")* on topic *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#158820 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* Hi, I was trying to do the same thing. Would be possible to eliminate the label 'Add to cart' leaving just the image? I have to change any other file? Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86322 - Thank you received: 14281 - - 12 years 4 months ago [\#158861](#158861) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#158861 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* Hi, set the color to "transparent" in that CSS and you won't see the text, just the image. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[makles](/forum/user/2685-makles "View makles's Profile")** - [![makles's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar2685.JPG)](/forum/user/2685-makles "View makles's Profile") - [ Offline](/forum/user/2685-makles) Less More - Posts: 17 - Thank you received: 0 - - 12 years 4 months ago [\#158935](#158935) by [makles](/forum/user/2685-makles "View makles's Profile") Replied by *[makles](/forum/user/2685-makles "View makles's Profile")* on topic *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#158935 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* Done. Thank you for your help ![:)](/media/kunena/emoticons/3.png ":)") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. - **[FrankIes](/forum/user/56447-frankies "View FrankIes's Profile")** - [![FrankIes's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/56447-frankies "View FrankIes's Profile") - [ Offline](/forum/user/56447-frankies) Less More - Posts: 1 - Thank you received: 0 - - 8 years 7 months ago [\#289973](#289973) by [FrankIes](/forum/user/56447-frankies "View FrankIes's Profile") Replied by *[FrankIes](/forum/user/56447-frankies "View FrankIes's Profile")* on topic *[Change "Add to cart" button to icon](/forum/26-product-category-display/868267-change-add-to-cart-button-to-icon#289973 "Hi, As you can see from the screenshot attached, the add to cart button ("In den Warenkorb") takes up too much space in the product listing of a category (table list). So I'd like to change it to a small cart Icon with a + symbol. How can I achieve this? Thanks! Michel")* as an an example - in file /components/com_hikashop/views/product/tmpl/add_to_cart_ajax.php Find and change below: Code: if($add_to_cart && !$has_options && !$global_on_listing) { ?> <a class="<?php echo $css_button . ' ' . $css_button_cart; ?>" rel="nofollow" href="<?php echo hikashop_completeLink($classical_url); ?>" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="<?php echo $this->row->product_id; ?>" data-addTo-div="<?php echo $this->params->get('main_div_name'); ?>"<?php if(!empty($extra_div_name)){ echo ' data-addTo-extra="' . $extra_div_name. '"'; } ?> data-addTo-class="add_in_progress" title="<?php echo JText::_('HIKA_DELETE'); ?>"><span><img src="<?php echo HIKASHOP_IMAGES . 'delete2.png';?>" style="max-width:inherit;" border="0" alt="<?php echo JText::_('HIKA_DELETE'); ?>" /><?php if(!empty($this->row->product_addtocart_message)) echo JText::_($this->row->product_addtocart_message); else echo JText::_('ADD_TO_CARTT'); ?></span></a> <?php } TO BELOW: Code: if($add_to_cart && !$has_options && !$global_on_listing) { ?> <a class="<?php echo $css_button . ' ' . $css_button_cart; ?>" rel="nofollow" href="<?php echo hikashop_completeLink($classical_url); ?>" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="<?php echo $this->row->product_id; ?>" data-addTo-div="<?php echo $this->params->get('main_div_name'); ?>"<?php if(!empty($extra_div_name)){ echo ' data-addTo-extra="' . $extra_div_name. '"'; } ?> data-addTo-class="add_in_progress" title="<?php echo JText::_('ADD_TO_CART'); ?>"><span><img src="<?php echo $this->baseurl ?>/images/base/ICON-ADD-TO-CART.png" style="width:20px; height:20px;" border="0" alt="<?php echo JText::_('ADD_TO_CART'); ?>" /><?php if(!empty($this->row->product_addtocart_message)) echo JText::_($this->row->product_addtocart_message); else echo JText::_(''); ?></span></a> <?php } add your icon to ROOT/images/**ICON-ADD-TO-CART.png** > **width:20px; height:20px;** Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjgyNjctY2hhbmdlLWFkZC10by1jYXJ0LWJ1dHRvbi10by1pY29uP3RtcGw9bWFya2Rvd24=) or [Create an account](/register) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.095 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)