[Resolved] Woocommerce Full-Width Images?

[Coulter]

I’m working on a redesign for one of my sites and I’d like my product images to be large and centered above the Add To Cart, Quantity, etc…

Something similar to this style: http://nitro.woorockets.com/niche-22/product/dior-prestige/

I’m sure there’s a lot of CSS jujitsu going on, but would this be possible without too much hacking?

Thanks!

[Tom]

Interesting layout – any chance you can link me to what you have so far?

[Coulter]

Yeah, I really like that layout style. Unfortunately, I don’t really have anything yet. When it comes to CSS I’m good with changing colors and adjusting padding/margin, etc… but I’m not yet skilled with large-scale layout changes, especially if they need to be responsive.

I guess I don’t really know where to start with something like this. I just need a more experienced opinion. Is this something I can do within Generatepress?

[David]

If you don’t mind i am going to follow this as working on something similar. I would like to see Tom’s view.
It’s a pretty heavy CSS hack to achieve this as the basic woo template is only made up of a few parent containers and all of the product summary lives inside just one.
My current project is shortcoding all the elements to hook them elsewhere but i have been toying with CSS grid and that definitely has potential.

[Tom]

It would involve some pretty heavy CSS. If someone wants to provide a basic template for me to start from, I can do something up in Inspect Element which would at least be a starting point 🙂

[Coulter]

I managed to hack this together:

https://staging1.pupperprints.com/product/beagle-tote/

I was basically guessing, so I’m not sure how great the CSS is. Also, I have no idea how to liberate the “Add To Cart” section from the .summary container like the example layout shows.

The code I have totally fails with responsiveness, but I think the default styles are fine for mobile. I’d rather have a standardized mobile exerience to increase conversions and usability.

[David]

That’s very impressive. I would love to see the style sheet.
I use the following code snippet to create a duplicate button so you can then hook it elsewhere in the template:

function diggs_cart_button () {
	global $post , $product;
  	$product_id = $product->get_id();
  	$product = wc_get_product( $product_id );
	ob_start();
	  	echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
	return ob_get_clean();
}
add_shortcode ('diggs-cart-button', 'diggs_cart_button' );

It doesn’t have any conditionals – so it won’t disable on out of stock or what not. But see if you can use it.

Here’s a good visual hook guide for Woo – in case you don’t have it.

[Tom]

I wonder if you could do this for the add to cart button..

add_action( 'wp', 'tu_move_single_wc_addtocart_button' );
function tu_move_single_wc_addtocart_button() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}

[Coulter]

Well, it works – but not with the CSS I cobbled together. With the current CSS, the after_single_product_summary appears WAY down below the Related Products.

[Coulter]

It looks as if it’s inserting into the ‘after_single_product’ hook instead of the ‘after_single_product_summary’, but I don’t know why.

[David]

The priority isn’t high enough – try changing it from 30 to 5, should get you closer to where you want it.

[Tom]

Good idea, David – that should bring it up quite a bit higher.

[Coulter]

Okay, that worked.

[Tom]

Cool, as far as your CSS, you should replace:

.woocommerce div.product .summary {
    transform: translateY(50%);
    position: absolute;
    left: 0px;
    bottom: 90%;
    width: 450px !important;
    z-index: 1;
}

With:

@media (min-width: 769px) {
    .woocommerce div.product .summary {
        transform: translateY(50%);
        position: absolute;
        left: 0px;
        bottom: 90%;
        width: 100% !important;
        max-width: 450px;
        z-index: 1;
    }
}

That should make stuff more responsive.

Let me know if you need help with any of the other styling 🙂

[Coulter]

Thanks for all the help! The other big thing that’s bugging me is how the example site has the Social Buttons, Stock Availability, and Add To Cart all locked to the bottom of the browser. Notice how they move if you change the browser height or width – but they always stay within view unless you scroll. I feel like this is an essential component of this layout because otherwise the Add To Cart is hidden under the fold, and that’s bad. What kind of CSS can I use to get the same effect?

[Author]

Posts