1

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.

DrMTR
  • 499
  • 1
  • 14
  • 35

2 Answers2

1

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.

Gabriel Morais
  • 155
  • 7
1

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 :)

Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35
  • Only one thing.. When select variation, button goes to to to the title. Is some issue with JS? See https://i.imgur.com/DnLDjwW.png?1 when select any variation button is moving to top, because there is CLEAR text for variation. – DrMTR Apr 21 '18 at 08:48
  • I didnt understand your issue. Do you want to return to our chat? – Gerardo BLANCO Apr 21 '18 at 15:29
  • @JoeKooker I got a solution but would like to validate with you before I edit the answer. Please comment at me so we can continue in a private chat :) – Gerardo BLANCO Apr 21 '18 at 16:51
  • @JoeKooker, follow up in the [chat](https://chat.stackoverflow.com/rooms/169470/discussion-between-gerardo-blanco-and-joe-kooker). – Gerardo BLANCO Apr 21 '18 at 18:12
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169511/discussion-between-joe-kooker-and-gerardo-blanco). – DrMTR Apr 21 '18 at 18:50
  • Are you here maybe? Go to chat pls. – DrMTR Apr 22 '18 at 17:53
  • @JoeKooker on chat – Gerardo BLANCO Apr 22 '18 at 17:54