Different font – full-width slider element

Hi,
Sorry for the very late reply and thanks for the links. The first step is to download the font from Google Fonts and upload to your Enfold Theme Options > Import/Export > Custom Font Manager option.


Then go to Enfold Theme Options > Advanced Styling and choose Slideshow titles and choose your font:

Then clear your browser cache and check, the font should be applied:

Best regards,
Mike

Hi,
Please try setting the color at: Enfold Theme Options > Advanced Styling > Main Menu Links, while it is not specific to the Mega Menu, it may help. If not then please set the menu on your live or sandbox site to match your Mega Menu screenshot so we can examine it.

Best regards,
Mike

Hi,
I checked your sandbox site again but the mega menu is not enabled so we can examine. I was expecting to see this: https://snipboard.io/3Ho8Os.jpg
so we can change the color of the “woodworking” & “metalworking” headings, correct?

Best regards,
Mike

Hi,
Thank you for the feedback, I’m glad you have this sandbox site set up and I don’t need to login, I only need to see your mega menu in action, but currently on your sandbox the mega menu is not active:

could you activate the mega menu on your sandbox so it is somewhat similar to your screenshot:

I just need to examine (see) why the “woodworking” & “metalworking” headings are still black and write some css to override it 🙂

Best regards,
Mike

Hi,
Thank you for adding the screenshots, I see that in your screenshot the mega-menu is showing, but it is not for me:

which is strange, does your sandbox site use server caching, or any caching plugins? Could you try clearing them?

Best regards,
Mike

Hi,
Thank you, please do keep me in the loop. As for adding a video sidebar to your product pages, I assume you know how to add the sidebar and add the video widget, so I imagine that the question here is how to show different videos based on product taxonomy, for that I recommend the Widget Options plugin, which adds visibility conditions to each widget.

Best regards,
Mike

Hi,
Thank you for the link, please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top #header .avia_mega_div > ul.sub-menu.avia_mega_hr {
    padding: 0 !important;
    max-height: 0;
}
#top #header .avia_mega_div > ul.sub-menu {
	padding: 0;
}
#top #header .mega_menu_title.av-special-font > a {
	color: #fff;
	padding: 0 0 0 20px !important;
}
#top #header .mega_menu_title.av-special-font > a:hover {
	color: #b34b4b;
	text-decoration: none !important;
	padding: 0 0 0 20px !important;
}

Then clear your browser cache and check.
The last item “All Machineries” doesn’t have a link so the color did not change, please add a link.
Please see the screenshot of the expected results in the Private Content area.

Best regards,
Mike

Hi,
Glad this helped, to change the font weight try adding: font-weight: normal !important;
like this:

Typically we request that each thread is focused on a single issue, but since your viewing your dev site requires editing the hosts file, lets continue here.
For your next question, on the akhurst.com/blog/ page I see that clicking on the first post category MACHINERY SOLUTIONS links to akhurst.com/shop/machinery-solutions/

but in your Shop there is no machinery-solutions category, so it leads to a redirect to your frontpage.
But I’m not sure what you are trying to do with your posts & products, your blog post should be pointing to your post categories, not your product categories. If this is the error then it is probably because you are using the same category slugs for posts & products, if you find this to be true then please ensure no two category slugs are the same for any post type.
For your question about adding the Product Grid to posts, I assume that you are using the Shortcode Wand to add the Product Grid to your posts and show only one product:

In the Product Grid element you can choose which taxonomy will be shown and how many will be shown, so if you want to only show one product try adding a specific taxonomy such as “dowel-featured-product” to the one product. While the fewest number of columns you can choose is “2” but you could use css like this to make it show as one column:

.single-post .shop_columns_2 .products .product {
    width: 100% !important;
}
.single-post .avia-product-slider1.shop_columns_2 {
	width: 50% !important;
}

But with this method you may end up with many single item taxonomies, depending on how many of these you which to set up.
Another option is to use the woocommerce single product shortcode, for example:
[products limit="1" columns="1" ids="511" class="post-product"]
this shows one product (id 511), one column, this screenshot compares the two shortcodes:

Best regards,
Mike

Hi,
1: Glad to hear.
2: Thanks for the screenshot, I note the your category options page includes a “custom permalink” option that I don’t have in my install:


So I believe this option is added by a plugin, please try disabling to see if the category links work correctly.
When you click on a blog post category it aggregates all posts with the same category, but post categories and product categories do not belong to the same category. Posts, Pages, Products, Portfolios, etc, are all different “post types” and do not share categories.
I hope this makes sense.
3: Yes, you can create a specific tag in Woocomerce for products, then if you choose this in the element it will only show these.

Best regards,
Mike

Hi,
Sorry for the late reply, so for number 2 you said: “I disable the plugin but all the pages that were created with the permalinks plugin don’t load.” this sounds like the customization to the permalinks will need to be adjusted for these pages, you can edit the links in the editor below the title for the page or post.
As for the “WooCommerce Advanced Product Labels” plugin, I’m not sure if it works correctly, but I did find this thread that pointed to it may not fully work.
As for the “Sale” icon at the Enfold Shop demo, I believe this is a woocommerce default option, no other plugins are used to create this.
As for the single product item linked below, is this what you want to add above the product?

If so my recommendation would be to create a shortcode for the html that creates this element, it looks like bootstrap html to me, and then inject this with jQuery above the single product content.
Will this same “homepage-grid-banner” be used for all products, or will each one be different?

Best regards,
Mike

Hi,
I couldn’t find the single product page in your screenshot but I did find another linked below.
It is possible to inject a slider below the title bar on a single product page with a function and the slider shortcode in your functions.php
But I’m unsure if every single product gets the same slider or a different one, and if you plan on changing this often or never.
This example would be to add one slider to all single product pages. First, we will want to get the shortcode for our slider by using the Magic Shortcode Wand tool in the Classic Editor:

Then for this example I added only one image using the “featured” image size (1500px x 430px) with a title & caption, this is the shortcode result:

Then we will add that shortcode to this function, replacing [shortcode-here] with your shortcode.

add_action('woocommerce_before_single_product', 'woocommerce_before_single_product_mod');
function woocommerce_before_single_product_mod() {
	if(is_product()) {
		echo do_shortcode("[shortcode-here");
	}
}

Then add this code to the end of your functions.php file in Appearance > Editor.
My example looks like this:

add_action('woocommerce_before_single_product', 'woocommerce_before_single_product_mod');
function woocommerce_before_single_product_mod() {
	if(is_product()) {
		echo do_shortcode("[av_slideshow size='featured' control_layout='av-control-hidden' perma_caption='aviaTBperma_caption' conditional_play='' animation='slide' transition_speed='' autoplay='false' interval='5' lazy_loading='disabled' alb_description='' id='' custom_class='' av_uid=''][av_slide slide_type='image' id='866' video='https://' mobile_image='' fallback_link='https://' title='Caption Title' video_ratio='16:9' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='']Caption Text[/av_slide][/av_slideshow]");
	}
}

I also adjusted the slider top & bottom padding and margin with this css:

.single-product .template-shop {
    padding-top: 0 !important;
}
.single-product .template-shop .avia-slideshow {
    margin: 0 !important;
}

the rresults:

Please note that the slider is inside the page container so the page padding and margin still apply.

If you are going to try this please edit your functions.php via FTP so if you make an error in the code and it crashes your site, you will be able to correct it. The WordPress > Appearance > Editor works good and is easy to use, but if your site crashes you can not reach the editor, but with FTP you can.

Best regards,
Mike

Hi,
To remove the ajax search result date, please try this css:

.ajax_search_excerpt {
	display: none !important;
}

I’m not sure what you mean by adding the FULL-SCREEN SLIDER element inside a 1/1 layout, for a single product page, please include a mockup. I think you would like to edit the product page with the Advanced Layout Builder (ALB), and use columns, sliders, etc.
Which you can by switching the ALB:

and using these ALB elements:

But you can not re-create the exact same product page as the default Woocommerce product page, but you could create your own layout. Try editing a test product and see if this will help.
If it is important to keep the current layout and add a slider as I did above in the screenshot, then the steps I showed would be the solution.

Best regards,
Mike

Hi,
Thank you for the screenshot, it looks very similar to my example above with the shortcode, to me this looks like the correct solution, please give this a try.
You can use the same slider as on your homepage if you copy and use that shortcode, you can see all of the pages shortcodes by using the Avia Layout Builder Debugger, or just recreate the element with the shortcode wand as described above.

Best regards,
Mike