[Skip to main content](#vessel-content)

#   Add to cart and wishlist buttons styling

##

- **[jess116](/forum/user/34233-jess116 "View jess116's Profile")**
- [![jess116's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34233-jess116 "View jess116's Profile") Topic Author
- [ Offline](/forum/user/34233-jess116)

Less More

- Posts: 17
- Thank you received: 0
-
-

8 years 4 months ago -  8 years 4 months ago [\#294159](#294159) by [jess116](/forum/user/34233-jess116 "View jess116's Profile")  *[Add to cart and wishlist buttons styling](/forum/26-product-category-display/895019-add-to-cart-and-wishlist-buttons-styling#294159 "-- HikaShop version -- : 3.4.0 -- Joomla version -- : 3.8.2 -- PHP version -- : 7.1 -- Browser(s) name and version -- : Firefox &amp; chrome  Hi there! I am trying to get my product description page &quot;add to cart&quot; button and &quot;add to wishlist&quot; buttons one above the other, and also the &quot;stock count&quot; and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.  I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.  If anyone could help that would be amazing, thank you!  Jess")* was created by *[jess116](/forum/user/34233-jess116 "View jess116's Profile")*

-- HikaShop version -- : 3.4.0
-- Joomla version -- : 3.8.2
-- PHP version -- : 7.1
-- Browser(s) name and version -- : Firefox &amp; chrome

Hi there!
I am trying to get my product description page "add to cart" button and "add to wishlist" buttons one above the other, and also the "stock count" and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.

I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.

If anyone could help that would be amazing, thank you!

Jess

Last edit: 8 years 4 months ago by [jess116](/forum/user/34233-jess116 "View jess116's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUwMTktYWRkLXRvLWNhcnQtYW5kLXdpc2hsaXN0LWJ1dHRvbnMtc3R5bGluZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[jess116](/forum/user/34233-jess116 "View jess116's Profile")**
- [![jess116's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34233-jess116 "View jess116's Profile") Topic Author
- [ Offline](/forum/user/34233-jess116)

Less More

- Posts: 17
- Thank you received: 0
-
-

8 years 4 months ago -  8 years 4 months ago [\#294180](#294180) by [jess116](/forum/user/34233-jess116 "View jess116's Profile")  Replied by *[jess116](/forum/user/34233-jess116 "View jess116's Profile")* on topic *[Add to cart and wishlist buttons styling](/forum/26-product-category-display/895019-add-to-cart-and-wishlist-buttons-styling#294180 "-- HikaShop version -- : 3.4.0 -- Joomla version -- : 3.8.2 -- PHP version -- : 7.1 -- Browser(s) name and version -- : Firefox &amp; chrome  Hi there! I am trying to get my product description page &quot;add to cart&quot; button and &quot;add to wishlist&quot; buttons one above the other, and also the &quot;stock count&quot; and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.  I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.  If anyone could help that would be amazing, thank you!  Jess")*

This is how it currently looks
[ ![halp01.jpg](/forum/attachment/43952) ](/forum/attachment/43952 "halp01.jpg")

This is how I would like it to look
[ ![halp02.jpg](/forum/attachment/43953) ](/forum/attachment/43953 "halp02.jpg")

And this is the mobile version, the add to cart section is just kinda messed up
[ ![mobileversion.jpg](/forum/attachment/43954) ](/forum/attachment/43954 "mobileversion.jpg")

- [ ![halp01.jpg](/forum/attachment/43952?download=1) ](/forum/attachment/43952?download=1 "halp01.jpg") [ ](/forum/attachment/43952?download=1 "halp01.jpg")
- [ ![halp02.jpg](/forum/attachment/43953?download=1) ](/forum/attachment/43953?download=1 "halp02.jpg") [ ](/forum/attachment/43953?download=1 "halp02.jpg")
- [ ![mobileversion.jpg](/forum/attachment/43954?download=1) ](/forum/attachment/43954?download=1 "mobileversion.jpg") [ ](/forum/attachment/43954?download=1 "mobileversion.jpg")

Last edit: 8 years 4 months ago by [jess116](/forum/user/34233-jess116 "View jess116's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUwMTktYWRkLXRvLWNhcnQtYW5kLXdpc2hsaXN0LWJ1dHRvbnMtc3R5bGluZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Philip](/forum/user/34318-philip "View Philip's Profile")**
- [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile")
- [ Offline](/forum/user/34318-philip)

Less More

- Posts: 4820
- Thank you received: 652
-
-

8 years 4 months ago -  8 years 4 months ago [\#294189](#294189) by [Philip](/forum/user/34318-philip "View Philip's Profile")  Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Add to cart and wishlist buttons styling](/forum/26-product-category-display/895019-add-to-cart-and-wishlist-buttons-styling#294189 "-- HikaShop version -- : 3.4.0 -- Joomla version -- : 3.8.2 -- PHP version -- : 7.1 -- Browser(s) name and version -- : Firefox &amp; chrome  Hi there! I am trying to get my product description page &quot;add to cart&quot; button and &quot;add to wishlist&quot; buttons one above the other, and also the &quot;stock count&quot; and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.  I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.  If anyone could help that would be amazing, thank you!  Jess")*

Hello,

You can use some **custom Css** to add like show on [ **this tutorial**](https://www.hikashop.com/support/documentation/272-hikashop-display-by-color.html#custom).
I think that you can add this kind of Css command :
Code:

add_to_cart_class, add_to_whishlist_class, quantity_block_class { display:block; }

Hope this will help you to get what you want.
Regards

Last edit: 8 years 4 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUwMTktYWRkLXRvLWNhcnQtYW5kLXdpc2hsaXN0LWJ1dHRvbnMtc3R5bGluZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[jess116](/forum/user/34233-jess116 "View jess116's Profile")**
- [![jess116's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/34233-jess116 "View jess116's Profile") Topic Author
- [ Offline](/forum/user/34233-jess116)

Less More

- Posts: 17
- Thank you received: 0
-
-

8 years 4 months ago [\#294201](#294201) by [jess116](/forum/user/34233-jess116 "View jess116's Profile")  Replied by *[jess116](/forum/user/34233-jess116 "View jess116's Profile")* on topic *[Add to cart and wishlist buttons styling](/forum/26-product-category-display/895019-add-to-cart-and-wishlist-buttons-styling#294201 "-- HikaShop version -- : 3.4.0 -- Joomla version -- : 3.8.2 -- PHP version -- : 7.1 -- Browser(s) name and version -- : Firefox &amp; chrome  Hi there! I am trying to get my product description page &quot;add to cart&quot; button and &quot;add to wishlist&quot; buttons one above the other, and also the &quot;stock count&quot; and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.  I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.  If anyone could help that would be amazing, thank you!  Jess")*

Hi Philip, thank you very much for your reply.
I tried adding that code to my frontend custom css file, but it doesnt seem to have made any difference unfortunately ![=(](/frown.gif "=(")
Are there any other possibilites you know of that might help?

Thank you kindly,
Jess

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUwMTktYWRkLXRvLWNhcnQtYW5kLXdpc2hsaXN0LWJ1dHRvbnMtc3R5bGluZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Philip](/forum/user/34318-philip "View Philip's Profile")**
- [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile")
- [ Offline](/forum/user/34318-philip)

Less More

- Posts: 4820
- Thank you received: 652
-
-

8 years 4 months ago -  8 years 4 months ago [\#294219](#294219) by [Philip](/forum/user/34318-philip "View Philip's Profile")  Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Add to cart and wishlist buttons styling](/forum/26-product-category-display/895019-add-to-cart-and-wishlist-buttons-styling#294219 "-- HikaShop version -- : 3.4.0 -- Joomla version -- : 3.8.2 -- PHP version -- : 7.1 -- Browser(s) name and version -- : Firefox &amp; chrome  Hi there! I am trying to get my product description page &quot;add to cart&quot; button and &quot;add to wishlist&quot; buttons one above the other, and also the &quot;stock count&quot; and Quantity selector also in separate lines.. basically i want them all in a straight vertical line, one beneath the other, but they are all grouped together and I am not really sure how to separate them.  I also have an issue with the quantity input field on the mobile version of the product description page, the input field is really long the plus and minus don't have the nice background/formatting of the desktop version.  If anyone could help that would be amazing, thank you!  Jess")*

Hello,

Can you provide an Url link with your **custom Css** ? In order to better see the context ?

**Note :** If needed, you can use our [ **Contact us**](https://www.hikashop.com/support/contact-us.html) form to provide your Url or references, **don't forget to add to your message an Url link to this topic.**

Awaiting news from you.
Regards

Last edit: 8 years 4 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTUwMTktYWRkLXRvLWNhcnQtYW5kLXdpc2hsaXN0LWJ1dHRvbnMtc3R5bGluZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; 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.065 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
