WooCommerce Shortcode does not work correctly

Hey Michael,

Thank you for the inquiry.

Please try to add this hook in the functions.php file:

function ava_woocommerce_pagination_actions() {
    add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10 );
    add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
    remove_action( 'woocommerce_after_shop_loop', 'avia_woocommerce_after_shop_loop', 10 );
}
add_action( 'init', 'ava_woocommerce_pagination_actions' );

Then use this css code to adjust the style of the pagination.

.template-shop .products {
  overflow: auto;
}

.woocommerce-pagination ul li {
  display: inline;
}

Best regards,
Ismael

Hi,

Thank you for the update.

On our end, the pagination displays correctly when we implement the modifications. We may need to access the site to check the issue properly. Please clone the site to a staging environment and provide the WP and S/FTP details in the private field.

Best regards,
Ismael

Hi,

Thank you for the info.

We modified the filter a bit and updated the css code. Please check the link in the private field.

Best regards,
Ismael

Hi,

It looks different because it is using the default WooCommerce pagination. Unfortunately, we cannot apply the theme’s pagination to the product shortcode. Please try using the Product Grid element instead, or use the following css code to adjust the style of the default pagination.

.woocommerce-pagination ul li {
    display: inline;
    float: left;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    padding: 0;
    border-radius: 100px;
    margin-right: 3px;
    margin-left: 0;
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
}

Best regards,
Ismael

Hi,

Anyway, your CSS code does not change anything,

Have you tried toggling or temporarily disabling the Enfold > Performance > File Compression settings?

To hide the sorting dropdown, please add this css code:

ul.sort-param.sort-param-count {
    display: none;
}

Best regards,
Ismael

Hi,

The style is applied to the pagination, but the circles are not visible because their background color is the same as the page’s background color. To change the background color, try adding the following css code:

.woocommerce-pagination ul li {
    background: #f9efea;
    margin-bottom: 30px;
}

Please check the screenshot in the private field.

Best regards,
Ismael