Weird Bug on shop page

Hi, I have a weird bug with my website. Basically I’ve WooCommerce on the website and have manually edited the pages of the products to add a section below the actual product. You can see here one for example: http://arapina.co.uk/product/arapina-with-banana/

So the issue that I have is when I go on a category page for example cakes (http://arapina.co.uk/product-category/cakes/)
and then I click Shop link in the menu, I get a weird bug appearing on top of the page, I’ll attach screenshot:

Hello @vlntnt,

Thank you for the screenshot.
You might have added the content using the builder on the page before you have set this page as SHOP page. To remove it, go to Woocommerce > Settings >Product Tab > General Tab > Shop Page: remove this current page. It will be a normal page and not a woocommerce shop template page. Edit it using the builder and remove this content. Then go to Woocommerce > Settings >Product Tab > General Tab > Shop Page and set it again as woocommerce shop page. Hope this helps.

I don’t have the remove this current page option, I can assign different page as a Shop but then I still can’t edit this one. That’s really weird, until this morning there was nothing on the page and it suddenly appeared. Can you assist me further with other options to edit the page cus it’s for my client and I need to sort it out. Thanks a lot.

when I inspect the page I can see

<div class="e1502-1 x-section">
    
<div class="x-bg" aria-hidden="true" data-x-element="bg">
  <div class="x-bg-layer-lower-image" style=" background-image: url(); background-repeat: no-repeat; background-position: center; background-size: auto;"></div>  </div>
  
<div class="e1502-2 x-container">
    
<div class="e1502-3 x-column x-sm x-1-2">
    
<div class="e1502-4 x-text">
  Vegan</div>
</div>
</div>

<div class="e1502-5 x-column x-sm x-1-2">
    
<div class="e1502-6 x-mod-container">
  
<a class="e1502-6 x-anchor x-anchor-toggle" tabindex="0" data-x-toggle="1" data-x-toggleable="e1502-6" aria-controls="e1502-6-dropdown" aria-expanded="false" aria-haspopup="true" aria-label="Toggle Dropdown Content" style="outline: currentcolor none medium;">

  
  <span class="x-anchor-content">
        <span class="x-anchor-text"><span class="x-anchor-text-primary">See allergen color map</span></span>          </span>

  
</a>
  
<div id="e1502-6-dropdown" class="e1502-6 x-dropdown" data-x-stem="dr" data-x-stem-top="" data-x-toggleable="e1502-6" aria-hidden="true">
  
<title>Text Example</title>
<style>
div.container1 {
background-color: #ffffff;
}
div.container1 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #bfd7db;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container1">
<p>Vegan, free from gluten, wheat free &amp; sugar free</p>
</div>

<!-- HTML Codes by Quackit.com -->

<title>Text Example</title>
<style>
div.container2 {
background-color: #ffffff;
}
div.container2 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #777777;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container2">
<p>Packaged products</p>
</div>



<title>Text Example</title>
<style>
div.container3 {
background-color: #ffffff;
}
div.container3 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #c7e1c4;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container3">
<p>Vegetarian</p>
</div>

<title>Text Example</title>
<style>
div.container4 {
background-color: #ffffff;
}
div.container4 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #dbdbdb;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container4">
<p>Free from gluten &amp; wheat</p>
</div>


<title>Text Example</title>
<style>
div.container5 {
background-color: #ffffff;
}
div.container5 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #cc7f89;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container5">
<p>Vegan, free from gluten &amp; wheat free</p>
</div>


<title>Text Example</title>
<style>
div.container6 {
background-color: #ffffff;
}
div.container6 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #f8c6af;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container6">
<p>Vegan</p>
</div>

<title>Text Example</title>
<style>
div.container7 {
background-color: #ffffff;
}
div.container7 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #fbe717;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container7">
<p>Meat</p>
</div>



</div>
</div>
<div class="e1502-9 x-text">
  Nutritional Information</div>
</div>

<div class="e1502-12 x-text">
  Health Benefits of Bananas</div>
  </div>

but I’ve not added it to the page, I’ve also checked the archive-product.php which is the default for the Shop page and is not there, somehow this is taking it from other place and placing it here

so I managed to find out that it basically is taking the added sections from the first product in the first category that I’ve added (the arapina with banana cake at the moment)

If I remove this section, the problem (temporarily disappears) but if I delete the entire product, it takes the section from the next one. Do you have any ideas why this might be happening, and how to sort it. Thanks.

Hello @vlntnt,

The url http://arapina.co.uk/product/arapina-with-banana gets redirected to http://arapina.co.uk/product/arapina-with-banana-2/ if I vist that page. Would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hi, yes it get’s redirected cus I tried to duplicate the page and play around to see if the issue persists.

at the moment the issue is not visible cus I’ve deleted the section under the cake but if you go to cakes >> arapina with banana >> edit >> insert template >> BANANA and save it it will appear again on the shop page.

Thanks a lot for the help.

Hello @vlntnt,

Thanks for providing the information. I have checked the Banana template and just as what I have suspected, you have inserted an invalid html code that messed up the whole section. You added this:

<!DOCTYPE html>
<title>Text Example</title>
<style>
div.container1 {
background-color: #ffffff;
}
div.container1 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #bfd7db;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container1">
<p>Vegan, free from gluten, wheat free & sugar free</p>
</div>

<!-- HTML Codes by Quackit.com -->
<!DOCTYPE html>
<title>Text Example</title>
<style>
div.container2 {
background-color: #ffffff;
}
div.container2 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #777777;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container2">
<p>Packaged products</p>
</div>



<title>Text Example</title>
<style>
div.container3 {
background-color: #ffffff;
}
div.container3 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #c7e1c4;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container3">
<p>Vegetarian</p>
</div>

<title>Text Example</title>
<style>
div.container4 {
background-color: #ffffff;
}
div.container4 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #dbdbdb;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container4">
<p>Free from gluten & wheat</p>
</div>


<title>Text Example</title>
<style>
div.container5 {
background-color: #ffffff;
}
div.container5 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #cc7f89;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container5">
<p>Vegan, free from gluten & wheat free</p>
</div>


<title>Text Example</title>
<style>
div.container6 {
background-color: #ffffff;
}
div.container6 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #f8c6af;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container6">
<p>Vegan</p>
</div>

<title>Text Example</title>
<style>
div.container7 {
background-color: #ffffff;
}
div.container7 p {
text-align: center;
font-size: 1em;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0em;
    text-transform: none;
color: #ffffff;
line-height: 1.2;
background-color: #fbe717;
    padding: 0.5em 1em 0.5em 1em;
margin: 0% 0% 2% 0%;
    color: rgb(255,255,255);
}
</style>

<div class="container7">
<p>Meat</p>
</div>



This code is not a valid html. Please double check the tags and make sure that it is properly closed. You may need some further assistance from the creators of this code if you got this code from other 3rd party sites.

If you need anything else we can help you with, please let us know.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.