![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
March 30, 2023 at 11:32 pm #1403051
Hello. Any way to do this, so our single product pages (SPP) keep all the features and formatting provided by Woocommerce? I have a Submenu I’d like to drop into single product pages without using Advanced Editor, which seems to be the only way to insert. Unless I create a mockup using that, copy code from inspecting the previewed or temporary page, and pasting that into once of the basic text areas on SPPs. And then have to do that for every SPP of the parts we want to create sort of a sub-site for (but using all of the features we have implemented in our ecomm store, and not have to recreate an entire ecomm site). THanks for any help…
April 1, 2023 at 8:52 pm #1403244Hey Illingco,
Thanks for your patience and the link to your site, as I understand your question you would like to add a full-width sub-menu element to all of your single product pages.
First you will need the shortcode for the full-width sub-menu element, to get this Enable the Avia Layout Builder Debugger and on a new page use the Advanced Layout Builder to create your full-width sub-menu element, then in the debugger field below the ABL you will see the shortcode, save this to a plain text editor and discard the page. Then remove any line breaks in the shortcode and add it to this function in your child theme functions.php:add_action('ava_after_main_container', 'ava_after_main_title_mod'); function ava_after_main_title_mod() { if(is_product()) { echo do_shortcode("[your submenu shortcode here]"); } }
Best regards,
MikeApril 3, 2023 at 10:39 pm #1403452Thank you. But, I should mention I only want this submenu on a specific set of single product pages, not all across the site. Any way to simply use the shortcode to insert on those pages as we build those products? THanks.
April 4, 2023 at 12:07 am #1403459Hi,
Try this function and replace the page IDs with yoursadd_action('ava_after_main_container', 'ava_after_main_title_mod'); function ava_after_main_title_mod() { if(is_single( array(595, 1056, 1097, 1138, 1067, 1424, 63) ) ) { echo do_shortcode("[your submenu shortcode here]"); } }
Best regards,
MikeApril 5, 2023 at 5:17 pm #1403617Thank you, this works, although for some reason it changes the add to cart button color. Bit odd…
April 5, 2023 at 5:51 pm #1403621Hi,
Glad to hear this helps, your add-to-cart button color seems to be set by the block editor right now with this css:wp-element-button, .wp-block-button__link { background-color: #32373c; }
I’m not sure if you set this elsewhere, but if you want to change the color try this css:
#top.single-product .single_add_to_cart_button { background-color: red; }
change the color to suit and After applying the css, please clear your browser cache and check.
Unless there is anything else we can assist with on this issue, shall we close this then?Best regards,
MikeApril 13, 2023 at 11:04 pm #1404412One more thing. Thanks for CSS btw. Any way to get an image behind the submenu instead of a solid color? Perhaps a font that is different from the other menus? I assume with some more CSS? Thanks.
April 14, 2023 at 12:33 pm #1404449Hi,
Can you link to the image you want to use as a background for the sub-menu and is there a font example on your page that you want to use?Best regards,
MikeApril 14, 2023 at 3:47 pm #1404461Linked in private. This is all on a test site for now, and will need to be redone on the live site when approved. Font example would be the Illingdale brand font shown at the linked page. THanks!
April 15, 2023 at 6:27 pm #1404530Hi,
To add a background image to the sub-menu like on the page you linked to, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#idf-submenu { background-image: url(/wp-content/uploads/2023/04/Submenu-woodgrain-background.jpg); background-repeat: no-repeat; }
I see the font in your logo image but I don’t see a example on it on your site so I don’t know the name or if your site is loading it.
Nonetheless here is an example of the css you could use to change the submenu font to Montserrat:#idf-submenu li a span.avia-menu-text { font-family: 'Montserrat'; }
Best regards,
MikeApril 17, 2023 at 4:23 pm #1404706submenu background did not seem to work, maybe other CSS is overriding, or this is just not quite the right code?
April 17, 2023 at 6:30 pm #1404726Hi,
It seems to be working for me, please see the screenshot in the Private Content area.
Try clearing your browser cache following these steps for Safari and note step 4 where you will Clear the History.Best regards,
MikeApril 17, 2023 at 6:45 pm #1404730Sorry yes I figured it out. You need the full referring URL to get it to come up. Thanks.
April 17, 2023 at 6:49 pm #1404734Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Fullwidth Submenu in standard Woocommerce single product page’ is closed to new replies.