Jump to content


resolved

Changing The Buy Now Button In Exchange

exchange

14 replies to this topic

#1 Guest_Paul Clutterbuck_*

Guest_Paul Clutterbuck_*
  • Guests

Posted 05 November 2013 - 03:17 PM

How do I change the buy now button in exchange?

I want to make it stand out more and make it bigger.

#2 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,440 posts
  • LocationOklahoma City, OK

Posted 05 November 2013 - 03:34 PM

Hi Paul,

Can you please (always :)) provide us with a url so we can take a look?  And please give us some more details about how you'd like to make it "stand out more."  Then we can take a look and help you out with the CSS you'd need.

Thanks,

Elise

#3 Guest_Paul Clutterbuck_*

Guest_Paul Clutterbuck_*
  • Guests

Posted 05 November 2013 - 03:49 PM

Hi Elise,

Here is my product page:
http://www.1st4fitness.com/product/1st4fitness-november-2013-edition/

As you can see its just a small grey bar of a buy now button. I wouldnt mind it being a little higher and the same color as the site title.

Thanks
Paul

#4 Guest_Paul Clutterbuck_*

Guest_Paul Clutterbuck_*
  • Guests

Posted 06 November 2013 - 12:42 AM

Hi again,
I have also noticed that my purchases pages are a little off too, images attached.
Posted Image
Posted Image

Help to sort these out too would be great.

#5 Elise Alley

Elise Alley

    iThemes Support

  • Administrators
  • Others: All Plugins, All Themes, Members, Moderators, Toolkit, Webdesign
  • 5,440 posts
  • LocationOklahoma City, OK

Posted 06 November 2013 - 01:56 PM

Hey Paul,

If you make changes directly to any of the stylesheets in Exchange, any time you update Exchange, your changes will be overwritten.  What you'll want to do is create an "exchange" folder in your theme (ex:  wp-content/themes/YourTheme/) and, in that folder, you'd add a style.css file that you created with the following CSS:

.buy-now-button {
background: #da1f26;
color: #fff;
font-size: 1.5em;
font-weight: bold;
margin: 0;
}

#it-exchange-purchases .it-exchange-purchase-items .it-exchange-item-thumbnail {
margin-right: 1%;
}

#it-exchange-confirmation .it-exchange-transaction-product-details .it-exchange-featured-image {
max-width: 145px;
}

The first section of code is the styling for your Buy Now button.  Feel free to adjust that code (and any of the code) to get exactly what you're needing.  This should get you started however!

Give that a try and then let us know how it goes.

Thanks,

Elise

#6 Guest_Paul Clutterbuck_*

Guest_Paul Clutterbuck_*
  • Guests

Posted 06 November 2013 - 02:53 PM

Hi Elise,

Thanks for that, that worked!

Trying to do something similar with the "complete purchase" button but cant seem to make it happen.

#7 davidbraun

davidbraun

    Advanced Member

  • Members
  • Others: Builder, Builder, Toolkit
  • PipPipPip
  • 37 posts

Posted 14 April 2014 - 08:11 PM

Hello,

This does not work for me.

I'm using an older theme, Expansion-Red. Putting in the above CSS does not change the buynow button. See http://www.ofa.proappcreators.com/product/june-7-event-ticket/.

I'm unclear on how to specify it correctly.

Here's what I'm doing:

#it-exchange-sw-purchase-options .it-exchange-sw-buy-now .buy-now-button {
background: #da1f26;
color: #fff;
font-size: 1.5em;
font-weight: bold;
margin: 0;
}

#8 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 15 April 2014 - 03:54 AM

Hi,

the theme is unrelated, you're styling elements of the Exchange plugin. And,

View PostElise Alley, on 06 November 2013 - 01:56 PM, said:

.buy-now-button {
background: #da1f26;
color: #fff;
font-size: 1.5em;
font-weight: bold;
margin: 0;
}

works fine for me,
Ronald

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#9 davidbraun

davidbraun

    Advanced Member

  • Members
  • Others: Builder, Builder, Toolkit
  • PipPipPip
  • 37 posts

Posted 15 April 2014 - 09:55 AM

Hi Ronald,

That's what I thought, but I need an explanation.

If you go to my test website at http://www.ofa.proappcreators.com/product/june-7-event-ticket/ and do the following
1. Look at the "Buy Now" button. This is what isn't changing for me.
2. Then click on the Buy Now button.
3. You'll see the "Pay with PayPal" button styled correctly.

Below is the style.css portion I'm using.

What am I doing wrong here? The paypal button is working fine, but not the buy now button.

.buy-now-button {
background: #da1f26;
color: #fff;
font-size: 1.5em;
font-weight: bold;
margin: 0;
}

.it-exchange-paypal-standard-button {
background: #da1f26;
color: #fff;
font-size: 1.0em;
font-weight: bold;
margin: 0;
}

#10 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 15 April 2014 - 01:14 PM

Hi,

from your post:

View Postdavidbraun, on 14 April 2014 - 08:11 PM, said:

Putting in the above CSS does not change the buynow button. See http://www.ofa.proappcreators.com/product/june-7-event-ticket/.

I added the css, and it does change the button, as per the css rules:

Posted Image

If you want to style another button, please add a link to the page, and indicate which button exactly you are referring to.

Also, I'm not sure where you are adding the css code to make these changes, as I can't see where you did,

Ronald

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#11 davidbraun

davidbraun

    Advanced Member

  • Members
  • Others: Builder, Builder, Toolkit
  • PipPipPip
  • 37 posts

Posted 15 April 2014 - 10:43 PM

Hi Ronald,

Finally figured out what was going on.

I had a comment in my style.css, with // instead of /* */. Seems like I've used // in my css files before, without a problem. Why here, I don't know.

The weirdest thing is that it rendered they buy now class inactive, but the paypal class, just afterwords, was OK.

Thanks for all your help.

Dave

#12 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 16 April 2014 - 09:11 AM

Hi,

that is odd indeed. To the best of my knowledge, // is not valid for css comments (see http://reference.sitepoint.com/css/comments)

glad it's resolved though,
Ronald

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#13 davidbraun

davidbraun

    Advanced Member

  • Members
  • Others: Builder, Builder, Toolkit
  • PipPipPip
  • 37 posts

Posted 16 April 2014 - 10:57 AM

Hi Ronald,

I'm having trouble with the .purchase-options class. If I change it in frontend-global.css, modifying the padding, it works.

But if I add it to my style.css, it isn't effective. As in

.purchase-options {
padding:0em;
}

Thoughts?

Dave

#14 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 16 April 2014 - 04:15 PM

Hi Dave,

for future new questions, please open a new topic.

On this, can you give some background? A link to the page where this shows/doesn't show. And explain what exactly it is you want to achieve on which element,

thanks!
Ronald

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#15 davidbraun

davidbraun

    Advanced Member

  • Members
  • Others: Builder, Builder, Toolkit
  • PipPipPip
  • 37 posts

Posted 16 April 2014 - 10:11 PM

OK, I'll open a new topic for future questions.

Found this: http://ithemes.com/forum/topic/57788-removing-default-styling/

The iThemes codex really needs to be updated to include this information, or at least in a place more readily accessible.

Thanks.



Reply to this Topic


ATTENTION
If this topic is marked RESOLVED or INFORMATION, or if you are NOT experiencing EXACTLY the same issue, please start a new topic to provide the details of your problem. If the solution provided doesn't work for you, you should start a new topic. If you feel this thread contains relevant information, you may include a link to it in your new topic. To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. When posting your question or request on the forum, please be as concise and specific as possible. The shorter and more to the point you can make your request, the better.

For BackupBuddy related issues, be sure to include the status log from your most recent backup.

CLICK HERE to start a new topic in the Exchange ecommerce plugin forum.


  



Also tagged with one or more of these keywords: resolved, exchange

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users