firstly apologies if this is in the wrong place or has been answered elsewhere.

[ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

I’m going to try keep it short and sweet because of a previous tendency to babble.

I am making an ecommerce shop with wordpress (newest version), with shopkeeper theme V1 and visual composer.

I have a front page which has three images, each representing a different shop section.

My shop page is only one page, with the three sections included all on the same page.

what I’m looking to do is link the images on the front page to an image at the top of each three sections on the shop page.

so I would like the 3 section images on this page:

https://www.limbogumbo.co.uk/ (classic, funky and crazy)
to link directly to the “title” images (again, classic to classic, funky to funky, crazy to crazy) on this page https://www.limbogumbo.co.uk/home/shop/

I did some research and looked up anchor tags or jump links (though I’ve never actually done that) – but I’m not sure if it works for images jumping to other images, and don’t understand how to even attempt this with wordpress/shopkeeper/visual composer because there is no way to edit the code for images as far as I can see.

Any help would be greatly appreciated,
thank you in advance,
Jenny

The tricky part is determining what template to edit. There are plugins that help you determine the main template file, but often the actual file is a partial template that is included into the main. You should be able to correlate HTML on the template with that on the actual page. If the item you are looking to modify seems to be related to a call to get_template_part(), then locate that partial template file and locate your item there.

Img tags can come from a number of functions, or be coded directly on the template. Check the page’s HTML source to see if an anchor link already wraps the image. If so, you need to modify the href attribute. Otherwise, the img tag needs to be wrapped with an anchor tag. Generic example:
<a href="<?php echo site_url('/foobar/#snafu'); ?>"><img src="<?php echo content_url('/uploads/foobar.jpg'); ?>" /></a>

In that example, the anchor tag’s href attribute will end up being something like httр://example.com/foobar/#snafu . In this URL, “foobar” is a page slug and #snafu is a jump or skip link to a particular element on the page with the name or ID of “snafu”. The target image of that link might look something like this:
<img id="snafu" src="<?php echo content_url('/uploads/snafu.jpg'); ?>" />

I’ve presented code as it may appear in template code. If you are writing content in the page edit screen, you cannot enter PHP code. You can still write proper HTML using the text view tab, hardcoding the equivalent of the PHP code, for example:
<img id="snafu" src="httр://example.com/wp-content/uploads/snafu.jpg" />

sounds like to me that the best way for me to go about this is editing the html in the text view tab as I have tried parent/child themes and completely screwed my site in the past (I’m a total amateur, can you tell?!)

I have looked and isolated this code (the other two look similar)

[vc_column width=”1/4″][vc_single_image image=”1011″ img_size=”full” add_caption=”yes” alignment=”center”][/vc_column]

I understand i need to edit this by adding in the href but it’s not looking like normal code.

I understand I need to add this in somewhere:

“>” />

but I don’t understand where it fits in with the code that is there. Sorry, I am struggling.

THe same goes for the img id of the “final location” image – this is what i get when i “inspect element”

and am not sure where the img id should go?

Sorry to be a massive pain and thank you in advance,
Jenny

I still thank you for your comprehensive and quick answer.

thank you ??