Docs

[alvisxhide]

hi,

the woocommerce product gallery lightbox looks great on desktop, however, when viewing from mobile or tablet, the pop-up popsition is too low and too close to the bottom edge of the screen, the problem is i need to scroll it up so that the navigation buttons of the light box are not covered by the iOS navigation bar every time when i wanna see the next pic (please refer to the attached pics for clearer pics which better illustarte what i mean). Meanwhile, there is plenty of spaces above the lightbox, so would it be possible to adjust the position of the pop-up? eg. horizontally align with middle the screen?

Thanks.

Alvis

[alvisxhide]

This reply has been marked as private.

[Paul R]

Hi,

You can try adding this under Custom > CSS in the Customizer.

@media (max-width: 480px) {
.single-product .pp_pic_holder.pp_woocommerce {
    top:100% !important;
}
}

Hope that helps.

[alvisxhide]

This reply has been marked as private.

[alvisxhide]

This reply has been marked as private.

[alvisxhide]

This reply has been marked as private.

[Rad]

Hi there,

I’m currently getting this,

Website Under Maintenance
Our Website is currently undergoing scheduled maintenance. Please check back soon.

I’d like to first check your site directly. Would you mind providing your admin login credentials in private reply?

Thanks!

[alvisxhide]

This reply has been marked as private.

[Zeshan]

Hi Alvis,

Thanks for the login credentials!

#1: You can add following code in your child theme’s functions.php file:

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
 
function woo_archive_custom_cart_button_text() { 
  return __( 'My Button Text', 'woocommerce' );
}

Replace My Button Text with your own text.

#2: Try adding following CSS under Custom > CSS in the Customizer:

a.add_to_wishlist {
    display: inline-block;
    position: relative;
    border: 1px solid #6190a2;
    padding: 0.563em 1.125em 0.813em;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
    color: #6190a2;
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 0.25em;
}

a.add_to_wishlist:hover {
    color: #2f3856;
    border-color: #2f3856;
    background-color: #ef2201;
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
}

#3: Use this CSS code:

.woocommerce div.product .images .thumbnails>a, 
.woocommerce-page div.product .images .thumbnails>a {
    width: 13.335%;
}

.woocommerce div.product .images .thumbnails>a:nth-child(4n+4), 
.woocommerce-page div.product .images .thumbnails>a:nth-child(4n+4) {
    margin: 4% 4% 0 0;
}

.woocommerce div.product .images .thumbnails>a:nth-child(6n+6), 
.woocommerce-page div.product .images .thumbnails>a:nth-child(6n+6) {
    margin-right: 0px;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[alvisxhide]

This reply has been marked as private.

[Paul R]

Hi Alvis,

You can add this in your child theme’s style.css (wp-content/themes/x-child/style.css)

/* to change tick icon to cart icon */
.woocommerce .button.product_type_variable:before, .woocommerce-page .button.product_type_variable:before {
    content: "\f07a

/* to change tick icon to cart icon */
.woocommerce .button.product_type_variable:before, .woocommerce-page .button.product_type_variable:before {
content: "\f07a\0020";
}
/* to change background and color of button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
background: #2f3856;
color: #fff;
border-color:#2f3856 !important
}
/* to fix lightbox position */
@media (max-width: 767px) {
.single-product .pp_pic_holder.pp_woocommerce {
top:100% !important;
}
}
20";
}

/* to change background and color of button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
    background: #2f3856;
    color: #fff;
    border-color:#2f3856 !important
}

/* to fix lightbox position */
@media (max-width: 767px) {
.single-product .pp_pic_holder.pp_woocommerce {
      top:100% !important;
}
}

You may change 100% to achieve your desired position in mobile and tablet

As stated above, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[alvisxhide]

This reply has been marked as private.

[Paul R]

Hi Alvis,

I check your child theme’s style.css and I don’t see the code getting added in there.

http://www.navyholic.com/wp-content/themes/x-child/style.css?ver=4.3.0

Please add the code below in your child theme’s style.css. If it is not working, kindly leave it there so we can check why it is not working.

/* to change tick icon to cart icon */
.woocommerce .button.product_type_variable:before, .woocommerce-page .button.product_type_variable:before {
    content: "\f07a

/* to change tick icon to cart icon */
.woocommerce .button.product_type_variable:before, .woocommerce-page .button.product_type_variable:before {
content: "\f07a\0020" !important;
}
/* to change background and color of button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
background: #2f3856 !important;
color: #fff !important;
border-color:#2f3856 !important
}
/* to fix lightbox position */
@media (max-width: 767px) {
.single-product .pp_pic_holder.pp_woocommerce {
top:100% !important;
}
}
20" !important;
}

/* to change background and color of button */
.woocommerce li.product .entry-header .button, .woocommerce-page li.product .entry-header .button {
    background: #2f3856 !important;
    color: #fff !important;
    border-color:#2f3856 !important
}

/* to fix lightbox position */
@media (max-width: 767px) {
.single-product .pp_pic_holder.pp_woocommerce {
      top:100% !important;
}
}

Thanks

[alvisxhide]

This reply has been marked as private.

[alvisxhide]

This reply has been marked as private.

[Author]

Posts