[Support request] move price and add to cart block to below featured image?

Home Forums Support [Support request] move price and add to cart block to below featured image?

Home Forums Support move price and add to cart block to below featured image?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1984404
    sparkle

    hello, i’ve used a bit of css i found in these forums to move my featured image to the right side of my single product page, but i’d like to also move the price/add to cart/sku/metadata block to below that image. is it possible with css or a function?

    #1984458
    Ying
    Staff
    Customer Support

    Hi there,

    Is this what you are trying to achieve?
    https://www.screencast.com/t/tf6h4V2uYroU

    Let me know 🙂

    #1985027
    sparkle

    well. ultimately on small mobile screens that’s how it would flow, but for larger screens it would be like this: https://imgur.com/a/OP2Lj48

    #1985523
    David
    Staff
    Customer Support

    Hi there,

    you can’t move the summary/cart from below the product gallery.
    But you can move the gallery above the summary:

    add_action('wp', function(){
    	remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    	add_action('woocommerce_single_product_summary', 'woocommerce_show_product_images', 4);
    });

    You will need to remove the current CSS that is moving the image to the right, and then try this CSS:

    @media(min-width: 769px) {
    	.woocommerce #content div.product div.images {
    		width: 100%;
    		margin-right: 0;
    	}
    	.woocommerce.single-product div.product {
    		display:flex;
    	}
    	.woocommerce #content div.product div.summary {
    		order: 10;
    		margin-left: 20px;
    	}
    }
    #1987019
    sparkle

    hm. ok. thanks.

    #1987034
    David
    Staff
    Customer Support
    #1987069
    sparkle

    well. no. what i really wanted is to have the add to cart block move to below the featured image. when i tried your code, it brought the description entirely below the image and add to cart blocks. we’re experimenting with using the short description to bring some balance…

    #1987091
    David
    Staff
    Customer Support

    That says the snippet worked, and the CSS i provided should have then changed the layout… but you need to remove any other CSS thats currently being applied to that element.

    If you want to just add the snippet and NO CSS then i can take a look.
    I have changed the topic to unresovled so you can re-add any links to the Private Information

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.