Return to previous page

How do I place this 3 buttons ( Add to cart, Buy now, and Quantity button) in a single row? in the n

This topic has 19 replies, 2 voices, and was last updated 2 years, 3 months ago ago by Tony Rodriguez

Kazi Sabit

Participant

November 2, 2022 at 18:25

How do I place this 3 buttons ( Add to cart, Buy now, and Quantity button) in a single row? in the normal view and also for the sticky add to cart bar.

How do I place this 3 button in single row

https://prnt.sc/9SgXYvDvCISG
as you can see in this picture they are 3 in single row but buy now button is not visible in real mobile view. I want like this for the normal view as well ( I mean non sticky part)

https://prnt.sc/J9w_uitlI48z

#337758 Copied Theme version: 8

18 Answers

Tony Rodriguez

Support staff

November 3, 2022 at 06:13

Hello, @Kazi Sabit,

Thanks for using our Theme and for contacting us.

In order to place 3 buttons in a row on a desktop, simply go to the Dashboard >> XStore >> Theme OPtions >> Theme Custom CSS >> Global and paste the below code at the bottom of the CSS box there.

.single-product-builder form.cart{flex-wrap:initial !important;display:flex !important;flex-direction:row !important;}

Then save settings and check back to your site after clearing the browser cache. The result will appear like this: https://postimg.cc/kD8z57nz

For the mobile and sticky bar, please share your site wp-admin URL and access in the private content area of this topic by following the below-given format

WORDPRESS ADMIN URL:
WORDPRESS ADMIN USERNAME:
WORDPRESS ADMIN PASSWORD:

So that I will check and fix your issue on your site.

Note: Please take a complete backup of your site first and allow us to debug your site and change/remove the plugins to solve your issues.

Regards 8Themes Team.

#337779 Copied

Kazi Sabit

Participant

November 3, 2022 at 06:17

check the private content area.

Please contact administrator
for this information.

#337780 Copied

Kazi Sabit

Participant

November 3, 2022 at 06:23

Can you make both the line of ”Or” text (Left and right horizontal bar ) smaller so that ”add to cart” text fits in single line?

I marked those lines

https://prnt.sc/JvsB6Ne7king

if you could remove that or text and put it this way it would be better – https://prnt.sc/YZBIFvDT4iY0
check this picture

also it caused issue in mobile view – https://prnt.sc/ouJrqy8zIFw3

#337781 Copied

Tony Rodriguez

Support staff

November 3, 2022 at 08:27

Hello, @Kazi Sabit,

1- Alright, I have removed the line and now the text of buttons appears in 1 line see image: https://postimg.cc/tsv50dR3 I have done this with the help of CSS code you can see it here: https://postimg.cc/5XzwrhGV

2- Regarding the button issue on mobile it is also fixed with the help of CSS code as you can see in this image: https://postimg.cc/KR8bJF11 here is the resulting image: https://postimg.cc/QF6H00N3

Regards 8Themes Team.

#337791 Copied

Kazi Sabit

Participant

November 3, 2022 at 09:45

You didn’t fixe it in mobile sticky add to cart

https://prnt.sc/ozYvZePbdaGj

Also there is a slightly alignment issue in mobile with the quantity input box
https://prnt.sc/ZKaYeYUNzr60

#337794 Copied

Tony Rodriguez

Support staff

November 3, 2022 at 10:11

Hello, @Kazi Sabit,

1- Actually, by default the buy now button doesn’t appear on the mobile sticky cart bar only add to cart with quantity buttons will appear and it appears fine as you can see in this image: https://prnt.sc/ozYvZePbdaGj

2- The issue is resolved now please check back to your site after clearing the browser cache. I added a custom CSS code in the theme options check the image: https://postimg.cc/v48NKdFK and here is the resulting image: https://postimg.cc/3WB6FwzG

Regards 8Themes Team.

#337798 Copied

Kazi Sabit

Participant

November 5, 2022 at 04:18

See this screen shoot. it is available just hidden in the right side. please fix this.
https://prnt.sc/Vvnc75OT3sZM

This is about quick view. Check this out please.
https://prnt.sc/fTWssxpY3Fva

#337914 Copied

Tony Rodriguez

Support staff

November 5, 2022 at 07:49

Hello, @Kazi Sabit,

1- Don’t check the browser mobile view in customizer but please check the actual device “Mobile” you will see the result. Also, there is no such space available to adjust both buttons add to cart, and buy now.

2- You can see as well there is no such space to show it in 1 row I hope it makes sense.

Regards 8Themes Team.

#337928 Copied

Kazi Sabit

Participant

November 5, 2022 at 10:31

In quick view

If you can’t fit 3 button in one row then please fit 2 button in one row so that it looks presentable. I mean 1) add to cart and 2) Quantity button in one row. like the sticky add to cart

https://prnt.sc/N8BsoipGfWdD

Lir this picture

#337939 Copied

Kazi Sabit

Participant

November 6, 2022 at 05:01

1) In quick view

If you can’t fit 3 button in one row then please fit 2 button in one row so that it looks presentable. I mean 1) add to cart and 2) Quantity button in one row. like the sticky add to cart

https://prnt.sc/1iyOli9RUJob (Like this one.)

2) https://prnt.sc/1kMXNBD5E7ft (You have brought these two button too close. they should have tiny gap. Now they look sticked to gether. this is in pc version) https://prnt.sc/_ju6EQiYyHnw (see in mobile they have small gap. this appears perfect)

3) https://prnt.sc/P1xzd943Z2qh (what is this dots? )

#337954 Copied

Kazi Sabit

Participant

November 7, 2022 at 03:33

”Also, there is no such space available to adjust both buttons add to cart, and buy now.”

check this picture > https://prnt.sc/6122X-_qCWXG

this is about sticky add to cat bar ( ”no such space available to adjust”)

#337984 Copied

Tony Rodriguez

Support staff

November 7, 2022 at 05:51

Hello, @Kazi Sabit,

1- Quick view: I have set the 2 buttons (Quantity and add to cart in 1 row as you mentioned check the resulting image here: https://postimg.cc/yWvZp0jZ) I have added a CSS code in the theme options to make it work: https://postimg.cc/bGcDSgyK

2- Your issue is resolved now kindly check back to your site after clearing the browser cache. Here are the result images: https://postimg.cc/sQ8R16yW and https://postimg.cc/wynS91cc

3- I don’t see any dots on your site as you can see the screenshots I attached in point number 2 it is working just fine.

4. Sorry to say, that this is not a way to use the space everything/element is set as default you cannot adjust it like this way. If there was any possibility I already did it for you.

Regards 8Themes Team.

#337990 Copied

Kazi Sabit

Participant

November 7, 2022 at 05:57

1)https://prnt.sc/P1xzd943Z2qh (what is this dots in mobile version?)

2) You fixed quick view in desktop view but in mobile still the same . https://prnt.sc/P1s3ViC23_JY

#337991 Copied

Tony Rodriguez

Support staff

November 7, 2022 at 07:11

Hello, @Kazi Sabit,

1- It is fixed now please check back to your site after clearing the browser cache. Here are the images for better reference: https://i.is.cc/2dlstR79.png and https://i.is.cc/2dlus7lK.png

2- Actually, If I set it on mobile too then it will appear like this: https://postimg.cc/Kk3y31Fj that’s why I didn’t make any changes on mobile

Regards 8Themes Team.

#337999 Copied

Kazi Sabit

Participant

November 7, 2022 at 07:27

No problem brother. Do it in mobile too please. It will look less uglier then now it is.

#338000 Copied

Tony Rodriguez

Support staff

November 7, 2022 at 07:44

Hello, @Kazi Sabit,

Alright, I have made it now. please check back to your site after clearing the browser cache. Here is the resulting image: https://i.is.cc/2dnnJVms.png

Regards 8Themes Team.

#338005 Copied

Kazi Sabit

Participant

November 7, 2022 at 07:57

perfect brother. Thank you.

#338007 Copied

Tony Rodriguez

Support staff

November 7, 2022 at 08:19

Hello, @Kazi Sabit,

Sounds Great! that your issue has been solved.

Thanks for contacting us.
Have a great day ?

Topic Closed!

Regards 8Themes Team.

#338009 Copied
Tagged: add to cart, best selling, buy now, ecommerce, quantity button, single row, woocommerce themes
Viewing 19 results - 1 through 19 (of 19 total)

The issue related to '‘How do I place this 3 buttons ( Add to cart, Buy now, and Quantity button) in a single row? in the n’' has been successfully resolved, and the topic is now closed for further responses

How do I place this 3 buttons ( Add to cart, Buy now, and Quantity button) in a single row? in the n

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection