Hey netWKR,
I looked at your site and believe your goal is to get the thumbnails to open in lightbox.
Please try to call the lightbox with the class “.avia_activate_lightbox”.
I didn’t find any specific lightbox documentation, but I found: https://kriesi.at/support/topic/diable-the-enfold-lightbox-urgent/#post-193309 stating that the class “.avia_activate_lightbox” forces lightbox and the class “.noLightbox” prevents lightbox.
In my testing I found that removing the “target=’blank’” from you thumbnail and adding the class “avia_activate_lightbox” forced, or restarted, your lightbox.
(full class: “sit-tourism–lightbox lightbox-added avia_activate_lightbox”)
I’m not sure how you would add this to your code above, but I hope this will help.

Best regards,
Mike

Hey Bernd,
Not sure if it can easily be done, but you could try triggering with a script in your function, here’s such an example: https://kriesi.at/support/topic/adding-onclick-to-button/#post-417503

Best regards,
Mike

Hey DianaFuetterer,

Thank you for using Enfold.

Please remove the previous modifications then try to implement the solution in the following thread.

// https://kriesi.at/support/topic/product-image-low-quality-on-single-product-page/#post-788733

Best regards,
Ismael

Hi,

Thank you for the info.

Please add this css code in the Quick CSS field.

.av-special-heading:after {
    content: '';
    width: 200px;
    height: 10px;
    background: blue;
    display: block;
    margin-top: 10px;
    margin-left: 60px;
}

The line is going to be applied on every special heading element so you have to enable the custom css class field.

// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Apply a unique class attribute to the special heading.

Best regards,
Ismael

Hi,

I’m very sorry for the late response. We added this css code in the Quick CSS field.

.header-banner-below + .advertising-banners-div {
    padding-top: 15px;
}

Please remove browser cache or hard refresh before checking the page.

Best regards,
Ismael

Hi,

What is the current theme version in your installation? The version 4.0.5 of the theme should be compatible with the latest version of the plugin. If you’re having trouble with the product images, please refer to this link.

// https://kriesi.at/support/topic/product-image-low-quality-on-single-product-page/#post-788733

Best regards,
Ismael

Hi,

Please remove the css modification that was suggested previously then add this one.

@media only screen and (max-width: 767px) {
    #top #wrap_all #socialsection .flex_column {
        width: 33% !important;
        float: left;
    }

    #top #wrap_all #socialsection .flex_column:nth-child(1), #top #wrap_all #socialsection .flex_column:nth-child(5) {
        display: none !important;
    }
}

Remove browser cache or hard refresh before checking the page.

Best regards,
Ismael

Hi,

I think I see the issue now. The display property of the sections or grids are already set to “block”. You just need to hide them on certain screen sizes. For example, please look for this css modification:

/* alternate Coaching travail grid for mobile devices */
@media screen and (max-width: 989px) {
	#coaching-travail-desktop { display: none !important; }
	#coaching-travail-mobile  { display: block !important; }
}
@media screen and (min-width: 989px) {
	#coaching-travail-desktop { display: block !important; }
	#coaching-travail-mobile  { display: none !important; }
}

Replace it with:

/* alternate Coaching travail grid for mobile devices */
@media screen and (min-width: 1025px) {
	#coaching-travail-mobile  { display: none; }
}

@media screen and (max-width: 1024px) {
	#coaching-travail-desktop { display: none; }
}

Best regards,
Ismael

Hi,

I’m not sure, but maybe something like this would work instead of the current CSS?

#top .avia-layerslider .ls-wp-container{
  margin:auto;
}

Best regards,
Rikard

Hi,

Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hey!

Please remove the filter then modify the config-woocommerce > config.php file, remove everything then replace it with the following.

// https://pastebin.com/rYaHKWBz

In the functions.php file, add this code.

add_action( 'after_setup_theme', 'ava_new_product_gallery_support_mod', 10);
function ava_new_product_gallery_support_mod() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
    add_theme_support( 'avia-new-product-gallery-feature' );
}

Add this code in the Quick CSS field or the child theme’s style.css file:

.single-product div.product .woocommerce-product-gallery {
  margin-bottom:2.617924em;
  margin-top:0;
}

.single-product div.product .woocommerce-product-gallery {
    position:relative;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position:absolute;
  top:.875em;
  right:.875em;
  display:block;
  height:2em;
  width:2em;
  border-radius:3px;
  z-index:99;
  text-align:center;
  text-indent:-999px;
  overflow:hidden
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
  font:normal normal normal 1em/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;-
  moz-osx-font-smoothing:grayscale;
  display:block;
  content:"\f00e";
  line-height:2;
  text-indent:0
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger img{
  display:none!important
}

.single-product div.product .woocommerce-product-gallery img{
  margin:0
}

.single-product div.product .woocommerce-product-gallery .flex-viewport{
  margin-bottom:1.618em
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs{
  margin:0;
  padding:0
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs:after,.single-product div.product .woocommerce-product-gallery .flex-control-thumbs:before{
  content:"";
  display:table;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li{
  list-style:none;
  margin-bottom:1.618em;
  cursor:pointer;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  opacity:.5;
  -webkit-transition:all,ease,.2s;
  -moz-transition:all,ease,.2s;
  transition:all,ease,.2s
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img{
  opacity:1
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li{
  width:42.8571428571%;
  float:left;
  margin-right:14.2857142857%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n){
  margin-right:0
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li{
  width:23.8095238%;
  float:left;
  margin-right:14.2857142857%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n){
  margin-right:0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{
  width:14.2857142857%;
  float:left;
  margin-right:14.2857142857%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n){
  margin-right:0;
}

.single-product div.product .images .woocommerce-main-image{
  margin-bottom:1.618em;
  display:block;
}

.single-product div.product .images .thumbnails a.zoom{
  display:block;
  width:22.05%;
  margin-right:3.8%;
  float:left;
  margin-bottom:1em;
}

.single-product div.product .images .thumbnails a.zoom.last{
  margin-right:0;
}

Regards,
Ismael

Hi @Terve,

Thanks for the feedback, much appreciated. We’ll have a look at having the scroll to top button active by default for mobile devices.

Best regards,
Rikard

Hi,

Ok, thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard