sell website making service

Category: WooCommerce Tutorial

How to show few lines of text using CSS

On IndoorGuider.com we are using Simple Author Box plugin. IndoorGuider is a website where you can get guidance on kitchen recipes and kitchen appliances. We are using that Author box plugin to show the author’s bio under all blog posts.

How to show few lines of text using CSS
showing few lines of text using CSS

Why show few lines of text using CSS?

We are using free version of Simple Author Box plugin and they have very limited featured on free version. Also they don’t have such feature where you can show exactly 3 or 4 lines of texts. We had a long description for authors bio but we wanted to show exactly 4 lines of texts in both desktop and mobile responsive.

The CSS code

I applied the CSS code:

 .saboxplugin-wrap .saboxplugin-desc p {
    
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   line-clamp: 4; 
   -webkit-box-orient: vertical;
    
}

With the above code you can apply to any div, just change the class names and it will work.

Let me know in comments if any issues.

YITH Infinite Scrolling plugin not working after the update

In WordPress, plugins are essential tools that enhance functionality and improve user experience on websites. Sometimes conflicts between plugins can arise, causing unexpected issues. One common problem users encounter is when the YITH Infinite Scrolling plugin stops working due to conflicts with the WP Optimize cache plugin after an update.

On Dakhm we were using WP Optimize and YITH Infinite Scrolling plugin all was running OK with no conflicts. We do regular updates of all plugins, but suddenly we saw YITH Infinite Scrolling plugin stopped working after update. Conflicted versions are:

  • WP-Optimize 3.3.0
  • YITH Infinite Scrolling plugin Version 1.19.0

How to find the issue and solve it?

We used chrome inspect element and saw WP-Optimize was minifying the javascript of YITH Infinite Scrolling plugin. So I did something like the below image and the problem was solved. Here we let a javascript file of YITH Infinite Scrolling plugin to be ignored by minification by WP Optimize plugin.

YITH Infinite Scrolling plugin not working after the update

Understanding YITH Infinite Scrolling Plugin

What is YITH Infinite Scrolling Plugin?

YITH Infinite Scrolling is a WordPress plugin designed to replace traditional pagination on your site with an infinite scroll feature. It allows users to continuously load content as they scroll down the page, providing a smoother browsing experience.

Benefits of Using Infinite Scrolling

  • Improved user engagement
  • Faster navigation through content
  • Reduction in bounce rates

Understanding WP Optimize Plugin

What is WP Optimize Plugin?

WP Optimize is a popular WordPress plugin used for optimizing and cleaning up databases, compressing images, and caching pages to improve website performance and speed.

Benefits of Using WP Optimize

  • Increased site speed
  • Enhanced SEO performance
  • Reduced server load

The Conflict After Update

After updating either the YITH Infinite Scrolling plugin or the WP Optimize plugin, users may notice that the infinite scrolling feature stops working. This conflict often arises due to changes in plugin code or compatibility issues with other plugins or themes.

Symptoms of Conflict

  • Infinite scrolling feature not loading new content
  • Website freezes or crashes when scrolling
  • Console errors related to JavaScript conflicts

Common Reasons for Conflict

  • Changes in plugin code during updates
  • Conflict with other plugins or themes
  • JavaScript errors caused by conflicting scripts

Troubleshooting Steps

Resolving conflicts between YITH Infinite Scrolling and WP Optimize plugins requires systematic troubleshooting.

Step 1: Identifying the Conflict

Disable all other plugins except YITH Infinite Scrolling and WP Optimize to isolate the issue.

Step 2: Deactivating Plugins

Reactivate plugins one by one to identify which one is causing the conflict.

Step 3: Updating Plugins

Ensure both YITH Infinite Scrolling and WP Optimize plugins are updated to the latest versions to resolve compatibility issues.

Step 4: Testing Compatibility

Check if the conflict persists with different themes or plugin combinations to determine the root cause.

Step 5: Seeking Support

If troubleshooting steps fail, reach out to plugin developers or WordPress forums for assistance in resolving the conflict.

Prevention Measures

To prevent conflicts between plugins in the future, follow these best practices:

  • Regularly update plugins to the latest versions.
  • Test plugin updates in a staging environment before applying them to the live site.

Conclusion

Conflicts between YITH Infinite Scrolling and WP Optimize plugins can disrupt website functionality, but with proper troubleshooting and preventive measures, users can resolve these issues and ensure a seamless browsing experience for their visitors.

FAQs

  1. Why did the conflict between YITH Infinite Scrolling and WP Optimize occur after the update?
    • Conflicts can arise due to changes in plugin code or compatibility issues with other plugins or themes.
  2. How can I troubleshoot the conflict between YITH Infinite Scrolling and WP Optimize?
    • Start by identifying the conflict, deactivating other plugins, and updating both plugins to the latest versions.
  3. Are there any preventive measures to avoid conflicts in the future?
    • Yes, regularly update plugins and test updates in a staging environment before applying them to the live site.
  4. Can conflicting plugins cause damage to my website?
    • While conflicts can disrupt functionality, they typically do not cause permanent damage. However, it’s essential to resolve them promptly to ensure optimal site performance.
  5. What should I do if I cannot resolve the conflict on my own?
    • If troubleshooting steps fail, seek support from plugin developers or WordPress forums for assistance.

How to add a sub menu under Dokan plugin’s vendor dashboard

There is no easy way to add a sub menu under Dokan plugin’s vendor’s dashboard. Dokan is a multi vendor plugin for WooCommerce. I used Woodmart wordpress theme from ThemeForest. You need to know a bit of coding in PHP and understand Dokan plugin documentation to impletlememt a sub menu. Copy paste the below in theme’s function.php file and replace some texts as per your need.

Main Code

function shipping_rules_submenu( $submenu_items, $nav_key ) {
    if ( 'settings' === $nav_key ) {
        $submenu_items = array_merge(
            $submenu_items,
            [
                'shipping_rules' => array(
                    'title'      => __( 'Shipping Rules', 'dokan-lite' ),
                    'icon'       => '<i class="far fa-credit-card"></i>',
                    'url'        => 'put your link',
                    'pos'        => 70,
                    'permission' => 'dokan_view_store_payment_menu',
                ),
            ]
        );
    }

    return $submenu_items;
}

add_filter( 'dokan_dashboard_nav_submenu', 'shipping_rules_submenu', 10, 2 );

Explanation

dokan_dashboard_nav_submenu is the function that does the work. settings is the main menu that will hold the sub menu name “Shipping Rules”. Tweak the code to get desired result.

Does it work? Comment and share if it helps. Follow our blog to Learn more about WordPress

Check Most Recent Posts