-
Posts
-
Hi
On my iphone when you view a product, using woo, the buy button is at the bottom of the page and below the widgets. I would like to be above the widgets.Here is an example on mobile. The customers has to scroll through to much information to be able to buy the item
Thx
JoeHi islandjoe1!
Please use the code provided here to display your sidebar at the right side of the page – http://kriesi.at/documentation/enfold/change-woocommerce-single-product-page-layout/
Elements on the left side will always be displayed before the ones the right side.Best regards,
YigitHey!
You should add the code to Functions.php file in Appearance > Editor and not to Quick CSS field
Cheers!
YigitHi
I add the below code to my functions file and the buy buttons did move up on my mobile site as request, but now the images on my desktop are huge and distorted, please advise how to correct this this make the image the right size for desk topI added this code to funcions
#
# wrap single product image in an extra div
#
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_add_image_div’, 2);
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_close_image_div’, 20);
function avia_add_image_div()
{
echo “<div class=’four units single-product-main-image alpha’>”;
}function avia_close_image_div()
{
global $avia_config;
$avia_config[‘currently_viewing’] = “shop_single”;echo “</div>”;
}#
# wrap single product summary in an extra div
#
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_add_summary_div’, 25);
add_action( ‘woocommerce_after_single_product_summary’, ‘avia_close_summary_div’, 3);
function avia_add_summary_div()
{
echo “<div class=’five units single-product-summary’>”;
}function avia_close_summary_div()
{
echo “</div>”; //close out the summary
echo “<div class=’three units single-product-sidebar’>”;
get_sidebar();
echo “</div>”;
}I had to remove the code for now, as customers are complaining about the image size, but they are huge, please advise and thx again
Hey!
Please add following code to Quick CSS and adjust as needed
.single-product-main-image { width: 20%; }Best regards,
YigitHi
added the above code to the quick css and took it down to 5% with no results. Any other suggestions
Thx
JoeHey!
Have you tried flushing browser cache and refreshing your page a few times after applying the code?
If you did, please also try adding !important rule as following.single-product-main-image { width: 20% !important; }Cheers!
YigitSorry for this but I deleted the code that goes in the functions file and when I copy the above code my screen goes until i deleted and the link with the code is giving me a 404, so this time I will save it better. Once you send it, I will add the custom css
Thx
JoeHi
I tried all that and nothing worked. It worked before when I copy the code from the link you sent me, but it is now a 404 and I think when I copy it from here, something is going wrong. When you get a chance, can you please resendThx
JoeHi!
Please only use the code i posted here – https://kriesi.at/support/topic/buy-button-above-widgets-on-mobile/#post-336102
and do not add the code to functions.php fileRegards,
YigitI am putting this code > .single-product-main-image { width: 20% !important; } in the custom css file as you said
I need the first code you sent me. the one you told me to add to the functions
#
# wrap single product image in an extra div
#
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_add_image_div’, 2);
add_action( ‘woocommerce_before_single_product_summary’, ‘avia_close_image_div’, 20);
function avia_add_image_div()
{
echo “<div class=’four units single-product-main-image alpha’>”;
}function avia_close_image_div()
{
global $avia_config;
$avia_config[‘currently_viewing’] = “shop_single”;echo “</div>”;
When I copy it from above it does not work, but worked before, so I need a new copy please
Sorry for the confusion
JoeHi Joe
I am sorry for the confusion as well. That code is no longer needed since product page columns are no longer using units. Using only css code should be enough
Cheers!
YigitHi
Back to the original request. I need the widgets on the product pages to be on the right had side, because when you visit my site on mobile, you have to scroll to the bottom of the page to view the add to cart button, which is the add to cast button needs to be a the top of the pageView on mobile to add to cart button at bottom of page > https://www.islandjoescoffee.com/online-coffee-store/12oz-island-joes-coffee/12oz-beemers-papua-new-guinea-coffee/
I added this to the quick css > single-product-main-image { width: 20% !important; }
Flushed dns – deleted cache and even restarted my computer and the code has no affect.
Thx for the continued help and please advise
Joe
Hi Joe,
Try adding this at the very end of your theme / child theme functions.php file:
function add_custom_script(){ if(is_singular('product')){ ?> <script> (function($){ $(window).load(function(){ if (window.matchMedia("(min-width: 767px)").matches){ $(".single-product-main-image").before($(".single-product-summary")); } }); })(jQuery); </script> <?php } } add_action('wp_footer', 'add_custom_script');Regards,
JosueAdd this to the end of the function.php child theme and got a black white screen.
function add_custom_script(){
if(is_singular(‘product)){
?>
<script>
(function($){
$(window).load(function(){
if (window.matchMedia(“(min-width: 767px)”).matches){
$(“.single-product-main-image”).before($(“.single-product-summary”));
}
});
})(jQuery);
</script>
<?php
}
}
add_action(‘wp_footer’, ‘add_custom_script’);thx for continuing to help.. if you can help me, it will make mobile surfing my site better
joe
I think we are headed in the right direction. The code did not white out the screen. It put the Add to Cart button at the top of the page on both mobile and desktop, but it moved the image almost to the bottom of the page and even below the description. The image should be at the top of the page with the Add to Cart button under it, then the description and then the widgets
Take a look
And many thx for the continue support
Joe
- You must be logged in to reply to this topic.