Fullwidth Submenu in standard Woocommerce single product page

Hey 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]");
	}
}

The expected results

Best regards,
Mike

Hi,
Try this function and replace the page IDs with yours

add_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,
Mike

Hi,
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,
Mike

Hi,
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,
Mike

Hi,
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,
Mike

Hi,
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,
Mike

Hi,
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