[venyaParticipant]

Hello X-team!

I need some help customizing my checkout page.

1. I would like to center checkout instructions. Tried to make it bold with font-weight: bold; but didnt’ seem to be working?

2. Center the checkout and Paypal express buttons, and place them on top of each other, with orange on top and paypal bottom.

3. There was another button for paypal credit signup. I managed to remove that button with
.paypal_checkout_button { display:none;}
but there’s still some part of it left over on the right and I can’t figure out how to remove.

4. In the next screen that requests billing/shipping address, how do I modify the fonts listing First Name, Last Name, Company name etc….

5. How do I format the font inside those entry boxes?

Thank you for your help!

[venyaParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in!

#1. I am not sure which text you are trying to align center or make bolder. Are you referring this? – http://prntscr.com/apk3ce

In that case you can add this under Custom > CSS in the Customizer.

.woocommerce .x-alert {
  font-weight: bold;
  text-align: center;
}

Kindly clarify properly with a screenshot if you are referring anything else.

#2. It seems you are referring the Cart Page (http://www.bennyfromtheblock.com/cart/) not Checkout page. However you can use this CSS :

.woocommerce .wc-proceed-to-checkout {
  margin: 50px 0 20px;
  position: relative;
}

.woocommerce-cart .checkout-button {
  margin-left: -10px;
  position: absolute;
  top: 60px;
}

#3. You can use this :

a.clearfix:not(.paypal-express-checkout-button) {
  display: none;
}

#4. You can use the following selector to change the font-family :

.woocommerce-billing-fields label {
  font-family: "Lato", sans-serif;
}

Make sure the font you are using is already loaded from Customize > Typography > Custom Fonts.

#5. You can use this :

.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form textarea, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"] {
  font-family: "Lato",sans-serif;
  width: 100%;
}

Hope this helps.

Cheers!

[venyaParticipant]

Wow! Amazing. That almost fixed everything. Thank you!

#2 The buttons are in reverse order (paypal on top, orange on bottom). I would like Orange above the Paypal. Tried switching the numbers but only made things worse…Can you please help with that?

6) On product single page, how do I format the product variation (attribute) form box?
for example: http://www.bennyfromtheblock.com/shop/new-arrivals/golden-gloves/
Think its some variation of: .variations_form.cart label ?

8. On portfolio page I have a hover effect that zooms on the thumbnail. For some reason in the last few days the first time any thumbnail gets hovered on there is a blip, and a smaller version of the thumbnail visible for a split second.

Not sure what caused this.. don’t think I made any code changes to portfolio.

9. This probably goes beyond support your can provide, but thought it was worth asking 🙂
When using woocommerce to check out, Paypal is pulling my product name and a custom field. Since html doesn’t play nice it looks something like this in order summary:
Russian Idea<div class=”subtitlecart”>Alexander Yanov</div>

I managed to strip the HTML with the code below, but I also to also remove the custom field, leaving only product name.

add_filter( ‘woocommerce_paypal_args’, ‘custom_woocommerce_paypal_args’ );
function custom_woocommerce_paypal_args( $args ) {
foreach ( $args as $key => $arg ) {
if ( strstr( $key, ‘^item_name_’ ) ) {
$args[ $key ] = strip_tags( $arg );
}
}
return $args;
}

Thank you. Have a good weekend.
-Ben

[Rue NelModerator]

Hello Ben,

#2] The buttons are in reverse order because you have added this code in your customizer. Please remove this code:

.woocommerce-cart .checkout-button {
    margin-left: -10px;
    position: absolute;
    top: 60px;
}

You need to replace it using this code instead:

.woocommerce-cart .wc-proceed-to-checkout [class*="checkout-button"]{
    display: block;
    max-width: 180px;
    margin: 0 auto 20px;
}

#6] How you wanted to display the form? Could you please send us a screenshot so that we will have some idea?

#8] I could replicate the issue.

#9] Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

And by the ways, Cornerstone 1.2.2 is now available! This release contains several bug fixes and we’re quite excited about the new features, so be sure to check out the changelog. Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[venyaParticipant]

Hello!
Thanks for the help. #2 is fixed with the new code.

#6, I actually just want to change the font in the entry box (choose an option hardcover, softcover). Right now its too small and grey making it hard to read.

#8, Did you mean you could not replicate the issue?

Thanks.

[ChristopherModerator]

Hi there,

#6 Please add this:

select#binding option, select#binding {
    color: red;
    font-size: 18px;
}

#8 I’m not able to replicate this issue, please provide us with screen cast.

Thanks.

[venyaParticipant]

#6 Worked great!

#8 I just tried my site on a different computer and the issue was not there. Must be something in my browser cache… Glad its not a real problem for once! 🙂

I’m getting better at this but still managed to get stuck on some basic customizing…. I’m would like to reduce the font of portfolio titles that are listed in blog archive view like here:

http://www.bennyfromtheblock.com/multimedia-category/liberty-now/

I know it’s a h2.entry-title and thought the correct css would be:
.tax-portfolio-category .entry-wrap .h2.entry-title {font-size:15px; margin-right: 1px;}

Thanks. Appreciate the help.

[RupokMember]

Hi there,

Thanks for updating.

You can use this CSS :

.tax-portfolio-category .entry-title {
  font-size: 30px;
}

Hope this helps.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Cheers!

[Author]

Posts