-
Posts
-
Hi
I have problems with my menu on single product pages. It is moved under the product picture https://staarupblomster.dk/shop/fro/graesfro/jordbaermajs/
I would like to have the menu as on my shop category page https://staarupblomster.dk/shop/fro/
In a later support string I got this code to fix the problem, the only problem is that it doesn’t really fix the problem. The code puts the sidebar menu in the area where the product is, and not in the menu area, and are pushing the pictures to the right and the product text down, I would like to keep the design as it is, but having the left side menu.
I am using the default layout and not the Advanced Layout builder.`#
# 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=’four units single-product-summary’>”;
}function avia_close_summary_div()
{
echo “</div>”; //close out the summary
echo “<div class=’four units single-product-sidebar’>”;
get_sidebar();
echo “</div>”;
}Hey Humle,
Thank you for the inquiry.
Did you also add the css code for the modification above? Please try to use the css code provided in the following threads.
// https://kriesi.at/support/topic/shop-sidebar-to-right-side/#post-1245585
// https://kriesi.at/support/topic/my-shop-page-changes-design-when-i-activate-it-as-my-shop-page/#post-1216451Best regards,
IsmaelHI Ismael
When I use the code from the post I started myself, and you are linking to, my single product page are exploding and the design is completely ruined. When I only use the css and the function php from the first link, the overall design is at it almost should be. https://staarupblomster.dk/shop/fro/blomsterfro/stjerne-scabiosa/ the only thing is that the sidebare is at the right side and not the left as it should be, and as it is on my product category page https://staarupblomster.dk/shop/fro/ How do I change the sidebare to be at the left side on my single product page?
Hi,
Thank you for the info.
You have to make the single-product-summary and the single-product-main-image containers to float to the right instead of to the left.
.single-product-summary, single-product-main-image { float: right !important; } .single-product-main-image { margin-right: 0; } .single-product-summary { margin-left: 50px; }Then style the sidebar with this css code.
#top #main .sidebar { border-right-style: solid; border-right-width: 1px; margin-left: 0; }Best regards,
IsmaelHi Ismael
Thank you for your answer.
If I insert the code, the menu is placed at the center and the product picture is placed at the left. I have had another to look at the code, and he said that the problem lies in the php code. When adding the menu it is glued to the product summery in the main content area, and not placed in the menu area on the single product page. It is not possible to add the picture in-between the menu and the product description. The menu and the product description can switch places but nothing can come in-between them. If you investigate the code it doesn’t look like there are any room for a menu, like there is on the product category page. Pls. help me to change the php code in order to get a sidebar menu at the left side of my single product page.
Best regards
KatrineHi,
Thank you for the update.
Try to replace the snippet in the functions.php with the following code.
function ava534345953_init() { add_action( 'woocommerce_after_single_product_summary', 'avia_add_sidebar', 25); add_action( 'woocommerce_after_single_product_summary', 'avia_close_image_div_mod', 20); add_action( 'woocommerce_before_single_product_summary', 'avia_open_image_div_mod', 1 ); } function avia_open_image_div_mod() { echo "<div class='product-main-container'>"; } function avia_close_image_div() { echo "</div>"; } function avia_close_image_div_mod() { echo "</div>"; } function avia_add_sidebar() { if(is_product()) { $avia_config['currently_viewing'] = "shop_single"; get_sidebar(); } } add_action('init','ava534345953_init', 50);Then use this css code.
.product-main-container { width: 70%; float: right; } .product-main-container::after { content: ''; display: table; clear: both; } .product-main-container .single-product-main-image, .product-main-container .single-product-summary { width: 100%; } #top #main .sidebar { border-left: 0; border-right-style: solid; border-right-width: 1px; margin-left: 0; }Or post the FTP and WP details so that we could implement the changes.
Best regards,
IsmaelHI Ismael
Thank you for the new code it worked.
I have spited this css code string into 2: .product-main-container .single-product-main-image, .product-main-container .single-product-summary {
width: 100%;
}
So it looks like this:
.product-main-container .single-product-main-image {
width: 30%;
}
.product-main-container .single-product-summary {
width: 60%;
}Because if the with is 100% the product image still pushes the single -product summery under the product image, so it has to be controlled individually.
Best regards
Katrine
- You must be logged in to reply to this topic.