Close image div - Support | Kriesi.at - Premium WordPress Themes

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
November 24, 2015 at 4:04 am #541312
senso
Participant
Hi,

I’ve added a custom content below the product thumbnail in the single product page. I added the content in the product-thumbnails.php template. The content is included as intended, however, I run into one small problem.

The images that I included in that custom content seem to stretch to fill the entire width of that section. I’ve made sure the images are properly cropped to the right size before uploading. I’ve added the width and height too but to no avail.

I noticed the content that I added happened to be within the <div class=”images”>. I reckon adding the content after the close </div> of the images class is able to solve this problem? I can’t seem to figure out where the close div is for that class. Can you point me to the right direction?

Thanks!
- This topic was modified 9 years, 1 month ago by senso.
November 24, 2015 at 6:42 am #541339

Basilis
Inactive Moderator

Hi senso!

can you please provide us a link to your site, so we can see the issue and try assist?
Thanks a lot

Best regards,
Basilis

November 24, 2015 at 9:43 am #541395

senso
Participant

Hi Basilis,

Sorry, it is offline.
Are there any areas that sound confusing in my first post? I’ll try to explain again.
Thanks

November 24, 2015 at 1:10 pm #541551
Yigit
Keymaster
Hey!

Can you please add your custom code including a closing Div tag as following
```
</div><div class="your-custom-content">Custom stuff here</div>
```
Regards,
Yigit
November 25, 2015 at 6:16 am #542138
senso
Participant
Hi Yigit,

Thanks for the help. I doubt it works with the extra </div> added. With and without my custom code, by adding the extra </div> as suggested, the right sidebar appears and pushed the content(product title, tabs, price…etc) below.

May I know where is the original closed div found? I can’t find any reference to it. I’ll just have to add the custom content after the original </div> tag.
- This reply was modified 9 years, 1 month ago by senso.
November 25, 2015 at 7:32 am #542159

Basilis
Inactive Moderator

Hey!

Based on your issues, it seems we can not have a solution, if we can not see it live.
It might be more areas left open, so we can understand where it is happening and where you have to add the </div>.

Thanks a lot

Cheers!
Basilis

November 25, 2015 at 8:03 am #542179
senso
Participant
Hi Basilis,

With other theme, I don’t have this problem. It seems Enfold added this extra </div> tag. You can replicate the problem with the default enfold theme and woocommerce. Additional set up I did is “remove” Sidebar.

Try to add some custom content after the product thumbnail and you’ll get what I mean. The additional content is wrapped within the <div class=”images”> </div>.

For testing purpose snippet
```
add_action( 'woocommerce_product_thumbnails', 'include_test_info', 40);
function include_test_info() {
   echo 'abcdefg' ;
}
  
```
I have attempted to use “wc_get_template” to display the custom content and the problem persists.
November 25, 2015 at 8:14 am #542185
senso
Participant
Hi,

Arghh….After more search, I found in this file enfold/config-woocommerce/config.php, want to check if is what causing the issue I experienced?
```
#
# wrap single product image in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
if(!function_exists('avia_add_image_div'))
{
	function avia_add_image_div()
	{
		echo "<div class='single-product-main-image alpha'>";
	}
}

if(!function_exists('avia_close_image_div'))
{
	function avia_close_image_div()
	{
		global $avia_config;
		if(is_product()) {
		$avia_config['currently_viewing'] = "shop_single";
		get_sidebar();
		}
		echo "</div>";
	}
}
```
Thanks for the patience!
November 25, 2015 at 1:06 pm #542360
Yigit
Keymaster
Hey!

Please try commenting out
```
echo "</div>";
```
and check if that helps. You explained the issue well but seeing source code always helps. If your website is online, please post the link to it :)

Cheers!
Yigit
November 26, 2015 at 12:33 am #542794

senso
Participant

Hi Yigit,

Thanks for the help.
No. It doesn’t work either with commenting out
echo "</div>"
I reckon the product thumbnail is wrapped with sidebar? I’m curious why is it done in this way?

November 26, 2015 at 3:54 am #542825
senso
Participant
I’ve also noticed by adding a url to that section, it automatically generates below code within the a tag

rel=product_images[grouped]
```
<span class="image-overlay overlay-type-extern" style="display: none;">
<span class="image-overlay-inside"></span>
</span>
```
I’m very confused now.

I just simply need to add my custom section after the div image class, not within it. Is it very difficult to achieve this?

You can replicate the issue with a default enfold and woocommerce setup.
November 26, 2015 at 4:44 am #542840

senso
Participant

I think I’ve opened a can of worms… …

1. With any contents added below the product thumbnail, it is wrapped within the image class div.

2. Any a href tag auto generates rel=product_images[grouped].

3. By manually adding a </div> (to close the image class) before the custom content, the content on the right and sidebar (if any) will be pushed below the product thumbnail. If the sidebar has removed, it will produce an empty space above the product title. The empty space is due to the hidden sidebar..

4. The HTML output the sidebar despite being removed. http://i.imgur.com/x4ubf8t.png

November 26, 2015 at 11:24 am #542992
Yigit
Keymaster
Hey!

Can you please try adding following code to Functions.php file in Appearance > Editor
```
function avia_content_after_wcthumb() {
    echo '<div class="your-custom-content">here it goes</div>';
}
add_action( 'woocommerce_product_thumbnails' , 'avia_content_after_wcthumb', 20 );
```
If that does not work, why do not you add your custom content to top of your sidebar?
To be honest, i am still not sure the exact changes you would like to make. You can post the codes you would like to use here using http://pastebin.com/.

Regards,
Yigit
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.