Different buttons Hikashop, so different CSS

babetteharms.nl/winkel
-- HikaShop version -- : 2.3.2
-- Joomla version -- : 3.2.3

Dear Hikashop,

First of all: thank you for the amazing product you built! I am a bit of a demander, I'd like to change everything so it fits my website. So I am not criticising your product, but I just want a function that I can't get to work.

My 'problem' comes with the buttons. I have already a custom button, but it is not like your default button available for repeating. So the button I made only fits the 'Add to cart' ('Plaats in winkelwagen' in Dutch) button, but not the 'Previous' ('Vorige') and 'Next' ('Volgende') buttons in the cart. In the CSS of the button I set the background-width to '100% 80%' and that is perfect, but as you can see in the cart on my website, the 'Next' and 'Previous' button are now 100% of the width of the maincontent.

In short: is it possible to use different styles for the different buttons? So the 'Add to cart' is 100% width, the 'To cart' button is 50% (in example) et cetera.

Please help me, because I really like the customisation, but this way it doesn't work properly. Let me know.

Hi,

You can use CSS selector (using ID) to use different CSS rules depending the context (module / page / etc).

Regards,

Thanks for your reply.

Where can I edit the ID? In a php file?

Hi,

No, you don't have to edit views. You can just have more specific css rules.
For example in this code: So to apply a css property only on the first element and not on both buttons you can use the css:
.div1 .button{ /* my property */}
Instead of:
.button{ /* my property */ }

I get how to use CSS, and I get the <div> part, but where do I put the DIV's? Somewhere in the PHP the buttons need to change classes, if I'm right. So somewhere the button 'Next' has the class 'hikashop_cart_button' that refers to the CSS in the file frontend_custom.css. The only thing I want to do is to change the class of the buttons. So I can say 'class="button_next"' and then in the CSS file specify the .button_next.

I hope you understand the problem.

What xavier is trying to say is that you already have such div with ids or classes by default in HikaShop.
You don't need to add any PHP.

For example, for the button "next" of the checkout, you can use such CSS:
#hikashop_checkout_next_button{
//your CSS
}

And for the continue shopping button, you can use such CSS:
#hikashop_checkout_shopping_button{
//your CSS
}

Ah, thanks. It's clear now. Do you have a list of all the buttons? I think there are five of them. The 'To cart' button in the mini cart, the 'Add to cart' (but I have that already), the 'Next' & the 'Previous' button and the 'Continue shopping' button.

Would be great if you can give the other two (To cart and Previous) too. I guess the 'Previous' button is just '#hikashop_checkout_previous_button'.

Thanks for the help so far!

For the cart button, normally, you can do like that:
.hikashop_product_stock button{
//your CSS
}
I'm not sure what "previous" button you're talking about so I can't tell you exactly.
Anyway, I would recommend to read our tutorial on how to modify the CSS of HikaShop:
www.hikashop.com/support/support/documen...ize-the-display.html
There, we explain how you can look at the HTML of the elements, allowing you to easily find the classes/ids that are used everywhere in HikaShop so that you can style anything in HikaShop with CSS.