[Mark MParticipant]

Hi,

I am trying to work out how to structure a new site I am doing for a fabrics company. On their existing site when you go into a collection category you see some marketing information and then the items sub categories.

You can see what I am talking about on this link – http://fibrenaturelle.com/index.php?option=com_k2&view=itemlist&task=category&id=322:metalix&Itemid=170

This is a link to the site I am working on – http://fibrenaturelle.visionserver.co.uk/product-category/metalix/

I am trying to work out what sort of information I can put in the category description, currently I have just put a bit of the text. Ideally it would be a large marketing image, with some gallery items which change the large image, and some text like on the their existing site with the sub categories showing below.

Would that be possible and how would I go about it?

Regards,

Mark

[Mark MParticipant]

Hi,

I have seen that you can include an image in the description and it does display 🙂

http://fibrenaturelle.visionserver.co.uk/product-category/metalix/

Now I just need to work out if I can have one large image with a gallery of smaller images which when clicked change the display of the large image.

Regards,

Mark

[Prasant RaiModerator]

Hello Mark,

Thanks for writing in!

Request you to kindly walk-through the following documentation:

http://docs.woothemes.com/document/adding-product-images-and-galleries/

Hope that helps.

Thanks.

[Mark MParticipant]

Hi,

Sorry I don’t see how that will help me, please read my first message. I understand how to add gallery images for products as I have used woocommerce successful on 2 other sites.

The problem I am having is not on the product pages but figuring out what I can do in the description panel in the sub categories.

Regards,

Mark

[Paul RModerator]

Hi Mark,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Mark MParticipant]

Hi,

Ok I understand and have tried a different approach and I seem to have something that is working 🙂

What I have done is created a slider which I have put into the description of the category. This is the code I have used;

<p>[x_column bg_color="" type="1/1" style="padding: 0px 0px 0px 0px; "][x_slider animation="slide" slide_time="12000" slide_speed="2000" slideshow="true" random="false" control_nav="true" prev_next_nav="true" no_container="true"][x_slide][x_image type="thumbnail" src="http://fibrenaturelle.visionserver.co.uk/wp-content/uploads/2015/06/Metalix-marketing-5.jpg" alt="" link="false" href="#" title="" target="" info="none" info_place="top" info_trigger="hover" info_content=""][/x_slide][x_slide][x_image type="thumbnail" float="none" src="http://fibrenaturelle.visionserver.co.uk/wp-content/uploads/2015/06/Metalix-marketing-1.jpg" info="none" info_place="top" info_trigger="hover"][/x_slide][x_slide][x_image type="thumbnail" float="none" src="http://fibrenaturelle.visionserver.co.uk/wp-content/uploads/2015/06/Metalix-marketing-31.jpg" info="none" info_place="top" info_trigger="hover"][/x_slide][x_slide][x_image type="thumbnail" float="none" src="http://fibrenaturelle.visionserver.co.uk/wp-content/uploads/2015/06/Metalix-marketing-4.jpg" info="none" info_place="top" info_trigger="hover"][/x_slide][/x_slider]</p><p>Metalix is full of energy and fit for every purpose from curtains to cushions to bed covers, this collection will compliment any home perfectly.</p><p><strong>Available designs: (please click on a thumbnail image to view the colours available in each design)</strong></P>

You can see the results on this page;

http://fibrenaturelle.visionserver.co.uk/product-category/metalix/

A couple of questions I have now are;

– How can I remove the gap which is placed at the top and bottom of the slider.

– How can I slow the transition between the slides (I have tried changing slide_speed but it seemed to have no effect).

Thanks for your help.

Regards,

Mark

[LelyModerator]

Hello Mark,

Thanks for giving us the specific page URL.

Which gap are you referring to? In case you want the slider and the search product input text to be vertically align, please add the following CSS code in your Customizer via Appearance > Customize > Custom > CSS:

.term-description{
  margin-top: -21px;
}

To reduce the space between the slider and the text Metalix is full of energy and fit for every purpose from curtains to cushions to bed covers, this collection will compliment any home perfectly., please delete the extra <p> tag before that text.

To slow the transition, you can play with slide_time and slide_speed.http://theme.co/x/demo/integrity/1/shortcodes/responsive-slider/

Hope this helps.

[Mark MParticipant]

Hi,

Yes this is the gap I am talking about – https://www.evernote.com/l/AHYOnPYsxOtEl6cMHdjyeZqkkBS9H8oG_9kB/image.png

I have applied the CSS but it doesn’t seem to have got rid of it. Have also removed the additional <p> but again that hasn’t changed the space below it.

I have tried changing the slider settings to;

[x_slider animation="slide" slide_time="10000" slide_speed="6000" slideshow="true" random="false" control_nav="true" prev_next_nav="true" no_container="true"]

The slide_time one seems to work, but the slide_speed has no effect still changes just as fast as with 2000 setting.

Regards,

Mark

[Rue NelModerator]

Hello There,

The slide time sets the speed of the slideshow cycling, in milliseconds by default it is set to 7000. The slide speed on the other hand, sets the speed of animations, in milliseconds and the default is 600.

The page http://fibrenaturelle.visionserver.co.uk/product-category/metalix/ no longer exists. http://i.imgur.com/Pz2gi1t.png
Please send us again the url of the page that needs to be resolve.

Thank you.

[Mark MParticipant]

Sorry I have changed the URL structure by installing “Perfect SEO URL”

http://fibrenaturelle.visionserver.co.uk/metalix/

So both are set in milliseconds but the slide_speed setting doesn’t seem to change anything when altered.

Currently I have them set at 8000 and 1200, the duration of the slide has changed but the animation always remains the same.

Mark

[RadModerator]

Hi there,

Yes, it’s a bug which I already reported. The speed doesn’t seems changing specially in fade transition.

For now, all we could do is wait for the next update for first round of fixes 🙂

Thanks!

[Mark MParticipant]

Ok thanks, will wait for a fix.

[Mark MParticipant]

Actually i just thought we still haven’t worked out the gap issue from above.

Yes this is the gap I am talking about – https://www.evernote.com/l/AHYOnPYsxOtEl6cMHdjyeZqkkBS9H8oG_9kB/image.png

I have applied the CSS but it doesn’t seem to have got rid of it. Have also removed the additional <p> but again that hasn’t changed the space below it.

[Rue NelModerator]

Hello There,

Upon checking this page: http://fibrenaturelle.visionserver.co.uk/metalix/, it has still an empty p tag at the beginning of the content. You can either remove by editing the description or you can also use this custom css in your customizer, Appearance > Customize > Custom > CSS. The code will remove the p as long as it is empty.

.term-description p:empty {
    display: none;
}

Please let us know if this works out for you.

[Mark MParticipant]

I have removed the empty <p> tag but it failed to remove the gap. I have also tried adding the custom CSS which did remove it, but it also meant that the text <p> below got removed.

[Author]

Posts