Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis and Woocommerce
Tagged: WooCommerce
- This topic has 2 replies, 1 voice, and was last updated 6 years, 11 months ago by Toon61.
-
AuthorPosts
-
February 4, 2018 at 11:43 am #216069Toon61Member
Hi all,
I don't think this is related to Genesis themes specific, but more of a woocommerce way of thinking/working.
What I would like to accomplish is a way to manipulate the woocommerce hooks to get the following on a single product page:
The product image (product-gallery) and the product details (woocommerce-product-details or short-description) in one single DIV.
Under that div I would like to show the additional options for that product. These options are shown in woocommerce in a form. I want that form to be in a new div so I can set that div to full width.The default woocommerce way of showing this is like this (one div for image and one div for everything else)
<div> <div> </div><div> ------------------------ ---------------------------------------- | | | Price | | | | Short description | | | | | | IMAGE | | Additional Product Add-ons (form) | | | | | | | | | | | | Length | ------------------------| | | | | | Height | | | | | | Color | | | | | | | | | | | | | | Add to Cart | ---------------------------------------- </div> </div>
But I want it to look like this:
<div> <div> -------------------------- ---------------------------------------- | | | Price | | | | Short description | | | | | | IMAGE | | | | | | | | | | | | | | | -------------------------- ---------------------------------------- </div> <div> ------------------------------------------------------------------------- | | | Additional Product Add-Ons (form) | | | | | | Length | | | | Height | | | | Color | | | | | | Add to Cart | ------------------------------------------------------------------------- </div> </div>
I just cannot find anything on the internet on how to manipulate the standard woocommerce hooks or filters to get the additional add-ons in a superstate DIV.
Does anyone have any idea or resource where to look at to get this done?February 4, 2018 at 11:49 am #216072Toon61MemberHi all,
I don't think this is related to Genesis themes specific, but more of a woocommerce way of thinking/working.
What I would like to accomplish is a way to manipulate the woocommerce hooks to get the following on a single product page:
The product image (product-gallery) and the product details (woocommerce-product-details or short-description) in one single DIV.
Under that div I would like to show the additional options for that product. These options are shown in woocommerce in a form. I want that form to be in a new div so I can set that div to full width.The default woocommerce way of showing this is like this (one div for image and one div for everything else)
<div> <div> </div><div> ------------------------ ---------------------------------------- | | | Price | | | | Short description | | | | | | IMAGE | | Additional Product Add-ons (form) | | | | | | | | | | | | Length | ------------------------| | | | | | Height | | | | | | Color | | | | | | | | | | | | | | Add to Cart | ---------------------------------------- </div> </div>
But I want it to look like this:
<div> <div> -------------------------- ---------------------------------------- | | | Price | | | | Short description | | | | | | IMAGE | | | | | | | | | | | | | | | -------------------------- ---------------------------------------- </div> <div> ------------------------------------------------------------------------- | | | Additional Product Add-Ons (form) | | | | | | Length | | | | Height | | | | Color | | | | | | Add to Cart | ------------------------------------------------------------------------- </div> </div>
I just cannot find anything on the internet on how to manipulate the standard woocommerce hooks or filters to get the additional add-ons in a superstate DIV.
Does anyone have any idea or resource where to look at to get this done?February 5, 2018 at 3:06 am #216091Toon61MemberOops,
Figured this one out by myself.
Just a simple add_action to close a div, and open another one:add_action('woocommerce_before_add_to_cart_form','whd_open_div'); function whd_open_div() { echo '</div><div class="whd_row">'; }
And making sure the structure stays valid, create a closing div after the form:
add_action('woocommerce_after_add_to_cart_form','whd_close_div'); function whd_close_div(){ echo '</div>'; }
-
AuthorPosts
- The topic ‘Genesis and Woocommerce’ is closed to new replies.