Button display inline with text (all on the same line)

[juliegiles]

Hi,

I am hoping I can get my “buy now” or “add to cart” buttons to display on the same line as other text instead of displaying on their own line. See this page:

http://playground-sf.org/wordpress/box-office/

In the “Co-Productions” section I want the buttons on the same line as “FLEX TICKET”.

I tried making the css for the buttons say display:inline, that didn’t help.

Thanks.

J

[admin]

Update: Details on eStore’s Text Link Buy Feature can be found here:

https://support.tipsandtricks-hq.com/forums/topic/estore-how-to-use-a-text-link-to-accommodate-the-purchase-of-a-product

===============

A button is a form and by default a form will always go on its own line. Wrap the button and the other texts inside CSS div and then use the “float” properly to place theme side by side.

Alternatively, use the text link feature of eStore to create your add to cart or buy now button so it will look like a button but it will actually be a text link so you will have more control over the look and feel. Check the extra eStore shortcodes plugin for more details:

http://www.tipsandtricks-hq.com/ecommerce/wp-estore-shortcodes-and-functions-reference-460

Here is an example of how you will use it:

<a href="your-domain.com/?wp_eStore_buy_now=1"><img src="link-to-your-button-image" alt="Buy Now" ></a>

[juliegiles]

Ok, that fixes that problem, but creates another, now there is no hover state on the image. Is there a way to add that in css. I’ve tried a few things but they aren’t working, ideally this button would have 70% opacity like the others.

Thanks!

[juliegiles]

I am also wondering if the cart in the sidebar has an id? I was hoping to highlight it more in the sidebar by giving it a border and/or background. Would something like this work…

div#id-of-widget {

background:#cccccc;}

[admin]

You can easily add a CSS class to that link and then customize the hover style. This video will help you with these customization as it will show you how you can find what class and ID is there:

http://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

[juliegiles]

Hi Can I use this with an add to cart button instead? Can you send me the proper code? I tried to do it myself and it’s not working.

Thanks

Julie

[admin]

Yes, you can use this text link option to add an item to the cart too (just like how an add to cart button would work). Check the extra shortcodes plugin reference PDF file for details on how to use that.

http://www.tipsandtricks-hq.com/ecommerce/wp-estore-shortcodes-and-functions-reference-460

[Author]

Posts