Add to Cart buttons doubled up

@musojo, @mady1984 — Please keep all communications here in the forums in public. Initiating private communication from these forums is against our guidelines. Sadly, people with bad intent will use private communication to victimize others. To be clear, I do not believe in any way that Madhav has bad intent. I’m merely explaining why we have such a guideline.

We also do not permit members to access the admin areas of other member’s sites. Doing so incurs liability that no one should want to have or allow. If necessary, explain how a site owner can locate and share the information that is sought in admin areas. Screen shots can be made and posted to any public image sharing service. Links to such images can be shared here.

Thank you – I’m happy to share screenshots if you can guide me to which ones you need.

Also, I thought the double up cart button was solved but have discovered that hiding the ‘add to cart’ on the single product page has fixed the double up but has had another effect of removing the ‘select options’ button AND the custom Listen to audio button from the variable product item.

Many thanks,

Jo.

• This reply was modified 1 year, 4 months ago by musojo.

In my earlier reply I was reacting to dashboard sharing and Skyping which run afoul of our guidelines. Now that I’ve read your topic more closely, I can say that suggesting custom CSS solutions does not require dashboard access since you’ve provided a link to your shop page. To style the non-variable product page Listen to Audio link to look like other buttons, remove the “btn-lg catcbll” class attribute from the link, leaving the “button” class.

The resulting button appearance will be colored properly, but it’ll be much larger than the Buy Sheet Music button above it. To bring it closer to the same size, alter its padding properties. For example, you could add this to the Additional CSS customizer section:

.single-product a.button {
    padding: 11px 20px !important;
}

As for the variable product page buttons, they don’t appear to be hidden with CSS. The HTML appears to be entirely missing. Or I’m not looking in the right place. It’s much easier to find elements that are visible ?? If you could undo whatever it was that you did, I’m pretty sure there’d be a way to hide only the redundant button without also hiding ones that need to remain.

Note that hiding things with CSS is really a Band-Aid solution. It’s preferable for the HTML to be correct to start with. But there’s not much we can do in these forums to help you with things you do in the admin area. Suggesting CSS solutions is something that is much more accessible to us. If you need help with what is done in admin relating to WooCommerce, you may be better off asking for guidance in WooCommerce’s dedicated support forum. The support staff and expert users there are in a better position to help you with the admin end of things.

Thank you @bcworkz … Sorry to be so ignorant but can you please tell me how to find that ?“btn-lg catcbll” class attribute so that I can edit it? I know how to add custom CSS but not how to find and edit existing code.

As for the variable product page buttons, I think the problem started once I added the custom buttons. I haven’t done much on the shop page yet so do you think I should just scrap it all and start again?

Many thanks,

Jo.

No apologies necessary. In fact, when it comes to adding custom buttons to product pages, I may be even more ignorant than you! I’ve no idea what you did to add them, so cannot advise on how to alter class attributes. It might be easier said than done.

What is maybe feasible if altering the class is difficult is to add all the necessary CSS overrides that will style the link as desired. The risk in doing so is if it’s not done thoughtfully, this could also inadvertently affect other links we don’t want to alter. In any case, it’s preferable to have the correct HTML to start with instead of patching it up with CSS.

The easiest way to add HTML to product pages is to include it in one of the description fields, but then you’re limited to where the HTML will occur. WooCommerce does offer a lot of action hooks we can use. Using them does require some custom coding though. It’s not all that complicated of code, some people have managed to do it with little experience. They copy/paste examples they’ve found and do some minor editing.

Another way is with template overrides, but this approach is less than desirable. Best left for when the hook method will not accommodate a need. There may be other ways through helper plugins that I’m unaware of.

I can only speak in generalities, I don’t have a lot of WooCommerce experience. If you need more specific advice, I think their dedicated support forum is the best place to seek guidance. I cannot advise on what you should do from here, but those are your basic options AFAIK.

Thanks so much @bcworkz – I think I’ll try to get support directly through the custom buttons plugin and see how I go from there … If all else fails, I’ll try to do a workaround.