WordPress Divi pricing table hover effects

Add hover effects to pricing tables in Divi.

The code snippet below demonstrates how to add hover effects to the pricing table in the Divi theme. This can be useful if you want to enhance the user experience and make your pricing tables more interactive.

function wpsnippets_add_pricing_table_hover_effects() {
    wp_enqueue_style( 'wpsnippets-pricing-table-hover', get_stylesheet_directory_uri() . '/css/pricing-table-hover.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_pricing_table_hover_effects' );

To achieve this functionality, you need to create a custom CSS file that contains the styles for the hover effects. In the code snippet above, we’re using the wp_enqueue_style() function to enqueue the CSS file. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s stylesheet directory, and we append the /css/pricing-table-hover.css path to it.

You’ll need to create the pricing-table-hover.css file in your theme’s CSS directory and define the hover effects styles there. Here’s an example of what the CSS file might look like:

/* pricing-table-hover.css */

/* Add hover effect to pricing table */
.et_pb_pricing_table:hover {
    /* Add your hover effect styles here */
    background-color: #f2f2f2;
    border-color: #ccc;
}

In the example above, we’re targeting the et_pb_pricing_table class, which is the class used by Divi for pricing tables. You can add your desired hover effect styles within the curly braces.

Remember to adjust the CSS file path in the wp_enqueue_style() function to match the location of your pricing-table-hover.css file.

By adding this code snippet and customizing the CSS file, you can easily add hover effects to the pricing table in the Divi theme.

Examples

Example 1: Creating a Hover Effect with CSS

This example demonstrates how to create a hover effect on a Divi pricing table using CSS. The hover effect will change the background color of the pricing table when the user hovers over it.

/* CSS code */
.wpsnippets_pricing-table:hover {
    background-color: #f5f5f5;
}

In this code example, we use the :hover pseudo-class selector to target the pricing table element with the class .wpsnippets_pricing-table. When the user hovers over the pricing table, the background color is changed to #f5f5f5.

Example 2: Adding a Box Shadow on Hover

This example demonstrates how to add a box shadow effect to a Divi pricing table when the user hovers over it. The box shadow effect adds depth and visual interest to the pricing table.

/* CSS code */
.wpsnippets_pricing-table:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Example 3: Scaling the Pricing Table on Hover

This example demonstrates how to apply a scaling effect to a Divi pricing table when the user hovers over it. The scaling effect makes the pricing table slightly larger, creating a subtle animation.

/* CSS code */
.wpsnippets_pricing-table:hover {
    transform: scale(1.05);
}