To create custom footer on Product Page (Individual Products), you can follow these.
#A. Option 1: Use Footer Section
We will create a section in Footer, then show this section + hide other sections in Product Page
#1. First, you need to edit Site Footer
and add a Section on top of Footer.
I will use a simple design on this section.
#2. Use this code to Custom CSS box
/* hide footer top section on other pages */
footer.sections section:nth-child(1) {
display: none;
}
/* Show top section - hide other sections in Product Page */
body[class*="type-products"].view-item {
footer.sections section:nth-child(1) {
display: block;
}
footer.sections section:nth-child(n+2) {
display: none;
}
}
#3. In case you want to apply this custom footer on Specific Footer Only
You can find Shop Page ID.
In my example, it is: #collection-667f8bab720ee26389417857
Next, you need to change # to body. so new ID will be body.collection-667f8bab720ee26389417857
Next, use this code to Custom CSS box
/* hide footer top section on other pages */
footer.sections section:nth-child(1) {
display: none;
}
/* Show top section - hide other sections in Product Page */
body.collection-667f8bab720ee26389417857.view-item {
footer.sections section:nth-child(1) {
display: block;
}
footer.sections section:nth-child(n+2) {
display: none;
}
}
#B. Option 2. Use Plugin
With plugin, you can create custom section in Not Linked Page, then we will use code to get it from Not Linked Page and make it appears on Product Page.
#1. Create a Page in Not Linked
Use Name/URL: Custom Product Footer – /custom-product-footer
#2. Next, design the page. Here I use a simple layout.
#3. Install this plugin.
Plugin will give you some code to Code Injection Header/Footer
#4. Hover on Shop Page > Click Gear icon
Next, click Advanced > Page Header Code Injection
#5. Paste this code
<div data-wm-plugin="load" data-target="/custom-product-footer"></div>
#6. Use this code to Custom CSS box
[data-target="/custom-product-footer"] {
display: none;
}
body[class*="type-products"].view-item {
[data-target="/custom-product-footer"] {
display: block;
}
footer.sections {
display: none;
}
}
#7. Use this code to Code Injection Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
if (detail.target !== '/custom-product-footer') return;
$('div.wm-load-container').insertBefore('footer.sections');
})
</script>
#8. If you want this custom footer appears above Relad Products, you can change #7 code to this new code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
if (detail.target !== '/custom-product-footer') return;
$('div.wm-load-container').insertBefore('article.ProductItem>section:has(.ProductItem-relatedProducts)');
})
</script>
Note: If you use #8, this will inherit Product Page Style, so you will need to set color manually with CSS code.