WooCommerce - Buy Button and Align buttons

Hi,

I’m facing some issues in WooCommerce and I need your help.

The issues are as following:

1/ When we select an external product in WooCommerce a “Buy product” button is automatically displayed on a single product page. But this button overwrites

the “View” button displayed on the homepage or on the category page.

I want to have these settings for the “Buy product” button:
- to display only on a single product page and NOT to overwrite other buttons
- to open a “New browser tab” when we click on it

Then we will have this configuration:
- “View” button on homepage and category page points to a single product page
- “Buy product” button on a single product page opens a “New browser tab” and points to an external link

2/ I want also align “buttons, rating stars & prices” under the pics. Effectively, when we have more than 4 or 5 words in the product’s name the “buttons, rating stars & prices” move down and create a gap. I wish that they move as a block and ALIGN them in one row.

Many Thanks for the Help.

Hi davidovic123, welcome to the forums! :slight_smile:

I read your well described issues, but to be able to help we need to see the things you want to fix.

Is the site up so we can take a look??

Hi Erik_J

Thx for your kind replay.

The site is not running yet. It’s on wamp localhost.

Here are the screenshots about the issues described above. As we can see:

‘Pic 1’: the “Buy Product” button overwrites the “view” button in the Home page and in the category page.

‘Pic 1’: shows also that the buttons are not aligned. When we have more than 4-5 words in product description the 'price, rating stars, CTA button" moves down and creates a gap.

‘Pic 2’: shows a single product page. The need here is that “Buy” button opens in a ‘New Browser tab’.

Thank you.

https://i.postimg.cc/NMCb66gf/1-Overwrite-button.jpg

https://i.postimg.cc/C12HBwNR/2-A-single-product-page.jpg

Hi,

The pictures shows your issues. That’s good, but we need to see the code that the pictures represent.

You need to post both the html that is displayed and the CSS that control that html.

Also, you’re probably familiar with your browser’s inspect tools, but I’ll explain anyway:

You can explore all issues’ code in your browser by using its “Inspect” tool.
In Chrome: point at the object and right-click to get the options meny and select “Inspect…”.

The Inspect tool shows the page at the left and the code at the right (widen the window to get the html and css in two columns for better oversight).

The code window: The HTML element you point at is highlighted and the selected element’s CSS is shown with the latest rules at the top. The strike-throw of a property means it is over-ruled, probably by a later rule above.

You could try solve the issues in the browser by adding to or changing the code, right-click to get some options. Reload to start all over. :slight_smile:

1 Like

Here is a screenshot of the solution :slight_smile:

I’m afraid that my screenshot is of no use to you whatsoever (just as your screenshot is to us) other than showing perhaps how you would like the page to look.:wink:

We need to see all the html and css files that go along with this and as this is a woocommerce product then I guess no one can help unless we see the page live as there are probably hundreds of files to look through.

Do you have html and CSS skills and do you know how to modify wooCommerce templates? If not then you will probably need to find a developer to do this for you. We can help with coding issues and bugs but this seems more like a theme implementation question and probably beyond the scope of this forum.

You would need to add the target attribute as shown here but be aware that most users do not like new tabs being opened for them.

1 Like

Well done!!!

You always have the best answer. :rofl:

1 Like

If it was me, I would prefer a shorter “Buy” button adjacent to the “View” button.
And I would want that for all products in the two pictures you posted.

:slight_smile:

1 Like

Hi,

thx Erik_J, PaulOB for your kind replays.

Here are the complete HTML and CSS of the pages.

PaulOB says:

be aware that most users do not like new tabs being opened for them.

It’s an affiliate website, do you think it’s better to not open a new tab?
My idea is to open a new tab to permit a customer viewing more products and then if he wants to leave he close the website by himself. What’s your opinion?

Erik_J says:

If it was me, I would prefer a shorter “Buy” button adjacent to the “View” button.
And I would want that for all the products in the two pictures you posted.

It’s a good idea. Thank you for that. I see that the “Buy” button, in this case, comes below the “View” button and more Bigger. Because if we put all the Buttons adjacent we will have a lot of buttons in One row.
Also, the colors of those buttons may be opposite or reverse. The main color for the “Buy” button and the reverse color with stroke for the “View” button.
The block “Product name, Rating stars, Price and Buttons” may be centered.
This setting comes only on Home page and Category page because we don’t need to have a “View” button on a Single product page. On that page, only a “Buy” button may be displayed. What do you think?

Thank you.

Home page
https://uploadfiles.io/x5z76fri

A single product page
https://uploadfiles.io/qm3jl0oa

Here are the Category pages.

Category page (1)
https://uploadfiles.io/trni5edg

Category page (2)
https://uploadfiles.io/xq9lu6i4

Thx

It’s an old debate and opinions differ but old timers like me do not like being forced into a new tab :slight_smile:

I also know that less experienced users don’t realise what happened and why the back button doesn’t work. Indeed my wife had about 50 tabs open on her laptop when she tried to purchase something and had no idea what she had done or how to get out of it so she turned the computer off :slight_smile:

2 Likes

…and experienced users uses e.g. Ctrl+Click to open in a new tab. :slight_smile:

1 Like

Any Help, please.

Unfortunately I am away until Friday afternoon so can’t offer suggestions until then. Please make sure all relevant html and css is available in your zips:)

Hi,

Does the screenshot @PaulOB posted show the solution you want?

‘Pic 1’:the “Buy Product” button overwrites the “view” button in the Home page and in the category page.

Lokking at your zip files it seems the “view” button is replaced, not overwritten. Is that a setting in the WC plugin?

‘Pic 1’: shows also that the buttons are not aligned. When we have more than 4-5 words in product description the 'price, rating stars, CTA button" moves down and creates a gap.

Please answer this question: :slight_smile:

1 Like

Hi,

Thx for your replays.

Does the screenshot @PaulOB posted show the solution you want?

Effectively, the “buttons” are aligned but also “rating stars” and “prices” must be aligned as well.
My idea is when we have more than 1 line (4 words) in product description all that “block” moves down and aligned in one row.
The “block” here is = rating stars + price + button. These elements should be stuck.

Lokking at your zip files it seems the “view” button is replaced, not overwritten. Is that a setting in the WC plugin?

Exactly, when I disabled “ATC” button the default button which appears is “read more” button. Then I replaced “read more” text by “View” text.
But when we select an external product in woocom. the “Buy product” button is generated automatically. It’s shown on the single product page (a good thing) but also on the Home page and category page replacing (or overwriting) the previous button which is “view” button.
These changes are made by snippets, not by woocom.'s settings.

Do you have html and CSS skills and do you know how to modify wooCommerce templates?

I’m a complete newbie… lol. I just start learning

Thank you.

1 Like

On that page you can adjust the alignment of the buttons and text by using flexbox behavior. If you add the following code to your custom css it will give the display as shown in the screenshot below.

 .woocommerce ul.products li.product {display:flex;flex-direction:column;}
 .woocommerce ul.products li.product .astra-shop-summary-wrap{margin-top:auto;flex:1 0 0%;display:flex;flex-direction:column;}
 .woocommerce ul.products li.product .astra-shop-summary-wrap .star-rating{margin-top:auto;}

With the above code added the display is as shown in this unaltered screenshot below.

The buy product button is obviously controlled by some setting in your template and not a question I can answer. You would need a woocommerce developer to assist there or delve deeply into the documentation.

Changing the color of the buttons would be basic CSS so that’s something for you to learn. If you are not prepared or if you don;t have the time to learn html/css then I strongly suggest you hire a woocommerce developer to finish these changes for you. :slight_smile:

As I said before we don’t mind helping out and solving problems but we’re not here to build sites for free :slight_smile:

Anyway see how you get on with the changes I suggested first just to see if you can manage to implement them correctly. If they are working the we can tackle other css issues if they are within the scope of this forum.

1 Like

Thx PaulOB for your suggestions and taking time for your replays.