CODEWITHSUNDEEP
javascriptjquerycsswoocommerce
DrMTR
DrMTR

Reputation: 509

Allign Paypal Button next to "Add to Cart" in Woocommerce

i have custom Paypal payment button into my Woocommerce site and want to allign both buttons next one by one, like this image:

enter image description here

Currently is showing bellow add to cart button:

enter image description here

i tryed to move button UP, customizing margin-top, but seems dont give effect i wanted. This is CSS class for that button:

.wcppec-checkout-buttons__button img {
 margin: 0 auto;
 }

i tryed to modify this is this way:

 .wcppec-checkout-buttons__button img {
 margin-top:-100px;
 }

looks like button is hidding bellow add to cart button. Can someone to tell me where i doing wrong? Maybe can be used JavaScript ? Thanks in advance.

Actual problem can be seen here.

Upvotes: 1

Views: 1371

Answers (2)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

The solution involves to part

  1. Javascript - This will be used to move the paypal button into the desired location's parent
  2. CSS - A few rules to adapt the desire look

Javascript

Nothing complex here. Just remove the element with all its childs and append it to the destination. This has to be added on the custom JS on your WP theme.

The window.onload will wait for your document to load before the function runs.

window.onload = function() { 
  const sourceElement = document.getElementsByClassName('woo_pp_cart_buttons_div')[0]; 
  const destination = document.getElementsByClassName('woocommerce-variation-add-to-cart-disabled')[0]; 
  destination.appendChild(sourceElement); 
}

CSS

Just a few style rules to change the position and size of the paypal button. Also added a media query for a breakpoint on the mobile view.

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
  display: flex;
  padding: 0;
  flex-direction: row;
  height: 39px;
  justify-content: space-between;
  align-items: center;
}

.quantity.buttons_added {
  margin: 0;
  flex-shrink: 2;
}

button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed,
button.single_add_to_cart_button.button.alt {
  margin: 0 20px;
  flex-basis: 200px;
}

.wcppec-checkout-buttons.woo_pp_cart_buttons_div {
  flex-shrink: 5;
  margin: 0;
}

a#woo_pp_ec_button_product {
  padding: 0;
}

.wcppec-checkout-buttons.woo_pp_cart_buttons_div a img { 
height: 38px!important; 
}

@media screen and (max-width: 580px) { 
  .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled,
  .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
    flex-wrap: wrap;
    justify-content: space-around;
      height: 90px;
  }

  .wcppec-checkout-buttons.woo_pp_cart_buttons_div {
    padding-top: 15px;
  }
}

Hope this helps :)

Upvotes: 1

Gabriel Morais
Gabriel Morais

Reputation: 165

I have managed to put it aligned to the right, like the following: Paypal box aligned to the right

To do that, I edited the HTML code using the inspector developer tools: Inspection 1

Move the div with the class wcppec-checkout-buttons woo_pp_cart_buttons_div to inside the div with the class woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled. Add to CSS:

.woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled { display: flex; }

If you don't know what the flex property is, I suggest reading this: w3 css flexbox property.

Also another you may have now, is why the "add to cart" box was enlarged. You'll have to work on the sizing of the parent element for it stop happening. Take a look at this question here on stackoverflow.

Edit: Just read the author's comment saying he cannot edit the HTML, this probably won't work.

Upvotes: 1

Related Questions