Add extra image to single product page between header and product image - Support

Tagged: enfold, image, single product page

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

Author

Posts
November 19, 2014 at 11:45 am #353556

johniem
Participant

Hi,

I’ve noticed that our single product pages have a pretty high bounce rate and I’d like to add an image of our USPs between the header (menu) and the image/H1 of the product. Is this possible? If so, how do I go about this?

Thanks,
Wendy

November 19, 2014 at 3:41 pm #353733
Josue
Inactive Moderator
Hey!

Try adding this to your child theme functions.php file:
```
function avia_add_summary_div()
{
        echo "<img src='_USPS_IMG_URL_'>";
	echo "<div class='single-product-summary'>";
}
```
Cheers!
Josue
November 20, 2014 at 10:32 am #354172

johniem
Participant

Hi Josue,

Thank you! I tried it and it looks a little too close to the H1 tag for me. Sorry to be a pain, but what do I need to change to the code to have the image located on the left side of the top menu on all pages?

Thanks so much,
Wendy

November 21, 2014 at 6:55 am #354913

Andy
Inactive Moderator

Hi!

Right now I can’t see any image between header and H1/product image. Please add it so we can provide you with some CSS code.

Cheers!
Andy

November 21, 2014 at 11:13 am #355003

johniem
Participant

Hi Andy,

Thanks for that. I’ve added it back. Is it possible to place this image using Enfold’s Quick CSS? This way I can easily use a Dutch language image for the Dutch version of the site and an English one for the English version. Not sure how to do this if using functions.php.

Thanks!
Wendy

November 22, 2014 at 9:23 am #355824
Ismael
Moderator
Hey!

You can replace the code with this:
```
function avia_add_summary_div(){
  if(ICL_LANGUAGE_CODE=='en') echo "<img src='EN_USPS_IMG_URL_'>";
  if(ICL_LANGUAGE_CODE=='de') echo "<img src='DE_USPS_IMG_URL_'>";
  echo "<div class='single-product-summary'>";
}
```
Best regards,
Ismael
November 22, 2014 at 12:01 pm #355857

johniem
Participant

Hi,

Thanks for that. This way I can use different languages, however, the image is still located on the same location, but I’d like it to be at the left hand side of the top menu. What do I have to add to make this work?

Thanks,
Wendy

November 23, 2014 at 9:56 am #356157

Ismael
Moderator

Hi!

Can you please provide a screenshot on where you want the image to be located? I checked the site but I’m not sure which actual image to check.

Best regards,
Ismael

November 24, 2014 at 12:13 pm #356680

johniem
Participant

Of course! I’ve photoshopped it here (all I still have to figure out is how to move the currency switcher to the right)

Thanks!

November 25, 2014 at 6:26 am #357357
Ismael
Moderator
Hey!

Please replace the code with this:
```
add_action('avia_meta_header', 'avia_meta_header_usps');
function avia_meta_header_usps() {
	global $product;
	if(is_product()) {
		if(ICL_LANGUAGE_CODE=='en') echo "<img src='EN_USPS_IMG_URL_'>";
		if(ICL_LANGUAGE_CODE=='de') echo "<img src='DE_USPS_IMG_URL_'>";
	}
}
```
Move the currency switcher with this:
```
#top .cart-collaterals .cart_totals table .wcml_currency_switcher, #top.woocommerce-page .wcml_currency_switcher {
float: right;
}
```
Regards,
Ismael
November 25, 2014 at 9:58 am #357425

johniem
Participant

Hi Ismael,

I added both codes, but the currency switcher doesn’t move and the image in the top menu is lined out weird :( See images:

The image with the icons should be lined out to the left and the currency switcher between the English flag and the Facebook icon. What can I change to the code?

Thank you!

November 26, 2014 at 6:33 pm #358426

Yigit
Keymaster

Hey!

I just checked your website and this is how it looks on my end – http://i.imgur.com/FdQGizY.png
Have you figured it out already?

Best regards,
Yigit

November 26, 2014 at 7:14 pm #358460

johniem
Participant

Hi Yigit,

No, still haven’t figured it out. Tried the codes provided below for the currency switcher and the image, but somehow it’s not turning out as I’d like it to be. Do you have any ideas what to adjust to the codes to make the image and the switcher appear as in the photoshopped image below?

Thanks,
Wendy

November 27, 2014 at 6:04 am #358836

Ismael
Moderator

Hey!

I checked this page: http://www.stroopwafelsbydaelmans.com/winkel/daelmans-stroopwafels-in-blikje-2/

Looks like you didn’t add the code we suggested above. The image is still on top of the product title instead of the top header. Adjust the position of the usps image with css.

Best regards,
Ismael

November 27, 2014 at 9:43 am #358902
johniem
Participant
I had added the code, but it lined out really strange so I removed it..

EDIT: I’ve solved it by using an image in the phone number/small info field in Enfold’s theme options. I had to move the currency switcher to the sidebar for this, but for now this works.
- This reply was modified 10 years ago by johniem.
Author

Posts