Archived topic
How to set button width to be the same as the above elements
3 replies · Started by mamin on December 20, 2021
Viewing posts 1–4 of 4
Hi,
I added some link buttons into the Single Product Page using WC Hooks. I'd like to make the width of these buttons to size according to the length as the -+Qty & Add to cart button right above it.
Code used in Elements:
<?php
$url_platform1 = get_post_meta( get_the_ID(), 'url_platform1', true );
$url_platform2 = get_post_meta( get_the_ID(), 'url_platform2', true );
if ( $url_platform1 ) :
?>
<a>" target="_blank">Buy It On Platform1</a>
<?php
endif;
if ( $url_platform2 ) :
?>
<a>" target="_blank">Buy It On Platform2</a>
<?php
endif;
?>Link and code included for reference. Would appreciate the code edit required if it's simple enough, or a link guide I can refer to.
Thanks in advance.
Hi there,
That's quite tricky to do as the size of the quantity increment button + add to cart changes depending on the screen size.
But you can try this CSS:
form.variations_form.cart ~ .button {
display: block;
}
@media (min-width: 921px){
form.variations_form.cart ~ .button {
width: 294.5px;
}
}
@media (max-width: 768px){
form.variations_form.cart ~ .button {
width: 294.5px;
}
}Thanks Elvin.
Needs some tweaking but much time save with some headstart.
No problem. :D
This archived topic is closed to new replies.
