Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #17400

    Hope you can help me resolve an issue with multiple product images. My website is

    Firstly, I am trying to create multiple images on the product pages, similar to this theme:

    What I’ve managed to do is this:

    I only want one large image on the page but have smaller thumbnail images below it that people can click on to change the main image. Like in the example above.

    I have one main image in the Featured Image box and added the other images to the Product Short Description area.

    Can you please tell me what I’m doing wrong. Or do I need an extra plugin for this sort of feature?





    So you basically have two sets of thumbnail images and want one of them removed? Something like this -> ?




    Hi Nick,

    Yes that’s correct. Is this possible?





    Yes, before we rip it out though, in the code there are directions saying that its a shortcode and you should look for it in the content of the page when you edit it. Here is what it says:

    This is a gallery, created with the default
    <a href="">WordPress Gallery Option</a>.
    The Image size of gallery pics is set automatically when the theme is activated,
    all you have to do then is to insert a gallery with a max of 7 columns to make
    it look like the one in the demo. Since this Page is a subpage, nested to the
    Templates page, a sidebar with all siblings appears by default.


    [gallery link="some-name" columns="some-number"]

    Do you see anything like the above shortcode when you edit that page.. it would be in the big content text area?

    If you don’t see anything then please add this to the Quick CSS file in the admin backend > Abundance > Theme Options > Styling on the bottom of the page or to the custom.css file

    The css below will switch off the gallery.

    #top .summary .gallery{
    display: none !important;

    The form with the item count and button is tricky, since there are many of them and grabbing the entire page worth of code and finding it a new home will require you to re-do the move each time the plugin will get updated.

    However the css below should work, though I can’t be certain until you start adding different product types, then it will have to be tweaked a little. Also please add this to Quick CSS

    #top form.cart {
    position: absolute;
    left: 194px; /* lower the number, the higher it goes */
    top: 290px; /*lower the number , to left it goes*/

    The words ‘In Stock’ can also be moved, however when something is out of stock, or any of the various messages WooCommerce displays it will be in its original position. Prior to using the code below see if its current location is to your liking. The code below will move those 2 words somewhere by the new location of the button we just moved in the earlier step:

    #top div .stock {
    color: hsl(80, 37%, 44%);
    position: absolute;
    top: 270px; /* lower the number, the higher it goes */
    left: 194px; /*lower the number , to left it goes*/



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

The topic ‘Multiple Product Images’ is closed to new replies.