• Home
  • Plugins
      • Bayna - WooCommerce Deposits

        Allowing customers to pay for products using a deposit payment.

      • Twist - Product Gallery Slider

        Display your product images in the carousel layout and more.

  • Docs
  • Blog
  • Support
  • My Account

Getting Started

  • Where Is My Purchase Code?
  • How to Redeem My AppSumo Coupon?
  • Where can I cancel my subscription?
  • How to Install the PRO version?
  • How to transfer my license key to a new domain?

Product Gallery Slider

  • How to enable a lightbox popup on clicking the large image?
  • What is the difference between classic and Default Variation behavior options?
  • YITH WooCommerce Badge Management – Badge not showing !
  • How to use product gallery slider with Divi Page builder?
  • How to use the Product gallery slider with Elementor Page builder?
  • How to Add Video into Product Gallery?
  • Conflicts with other themes & plugins
  • Hooks: Actions and Filters
  • How to fix “Notice: Undefined index: load_assets in … on line 32” error?
  • YITH WooCommerce Color and Label Variations Conflict
  • How to center the video play icon?

Bayna

  • How to Enable Deposit/partial payment feature for Product?
  • How to pay the Due Payment for Deposits orders?
  • How to Disable Payment Gateways on the Checkout page?
  • How to set up deposit payment reminders for customers?
  • How to customize Email Templates for Deposit Orders?
  • Home
  • Docs
  • Product Gallery Slider
  • How to center the video play icon?

How to center the video play icon?

Paste this css code below int the Codeixer > product gallery > Advanced settings > Custom CSS field

a.woocommerce-product-gallery__lightbox.wpgs-video {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1 !important;
  background:transparent;
  
}
a.woocommerce-product-gallery__lightbox.wpgs-video i {
    width: 100%;
    height: 100%;
    display: block;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 80px;
    color: #fff;
  margin: 0 !important;
}
.wpgs-image .wpgs-video i:before {
  
    border-radius: 50%;
    padding-left: 10px;
    box-shadow: 0px 0px 10px 0px #fff;
}
Updated on October 8, 2022
YITH WooCommerce Color and Label Variations Conflict

Need Help?

[email protected]
2022 WPInteractive. An Initiative made with ❤️ by Codeixer
Useful Links
  • Terms & Conditions
  • Refund Policy
  • Privacy Statement
  • License Terms
  • Affiliates FAQ
  • Affiliate Account
  • Become an Affiliate
  • Password Reset Link

2022 WPInteractive. An Initiative made with ❤️ by Codeixer