Skip to content

Scraping WooCommerce website prices

If you’re scraping a website that uses WooCommerce, normally Price Comparison Pro will scrape the prices with no extra CSS/xPath/Regex config for the website scraper.

Some themes however adjust the HTML quite a bit, so here’s a guide and an example for how you would go about scraping a WooCommerce website.

In this example, I’m scraping https://www.hairglo.co.uk/product/high-sheen-glossifer/?ref=335.

So – to match that price element we’d use:

.woocommerce-Price-amount.amount

BUT: It’s important to recognise that this CSS selector would match a lot of other prices on the page.

In fact, if you use the SelectorGadget Chrome Extension and enter the CSS selector above, it will tell you there are 6 matching items:

If we scroll back up and right click the main price element and inspect it, by looking upwards in the HTML we can see the hierarchy and you’ll notice there is an element with 2 classes we can use: .summary and .entry-summary. We don’t actually need to use both.

With CSS selectors, spaces indicate hierarchy, so if we change our CSS selector to:

.summary .woocommerce-Price-amount.amount

It means find elements with both the .woocommerce-Price-amount and .amount classes inside elements with the .summary class.

You can see with the SelectorGadget immediately that our new CSS selector matches only 1 price which is what we want to avoid confusing Price Comparison Pro.

 

Did this article answer your question?

3 Comments

  1. Annie A.


    May 21, 2020 @
    9:24 pm

    So just confirm, to avoid confusing Price Comparison Pro – I should use “.summary .woocommerce-Price-amount.amount” as the CSS selector option.

    As per your previous screencast tutorial, should this term be amended to:-

    #summary .woocommerce-Price-amount.amount

    Reply

    • Dave H.


      May 21, 2020 @
      10:02 pm

      #summary would match elements like

      whereas .summary matches elements with

      In the case of the theme in this example, there is a

      element so the CSS to scrape this page should be .summary woocommerce-Price-amount.amount

      Reply

  2. ben


    August 3, 2021 @
    2:43 pm

    nice way of scraping of the eCommerce sites, thank you for your input, also I would suggest e-scraper .com

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


No Comments

  1. Annie A.
    May 21, 2020 @ 9:24 pm

    So just confirm, to avoid confusing Price Comparison Pro – I should use “.summary .woocommerce-Price-amount.amount” as the CSS selector option.

    As per your previous screencast tutorial, should this term be amended to:-

    #summary .woocommerce-Price-amount.amount

    Reply

    • Dave H.
      May 21, 2020 @ 10:02 pm

      #summary would match elements like

      whereas .summary matches elements with

      In the case of the theme in this example, there is a

      element so the CSS to scrape this page should be .summary woocommerce-Price-amount.amount

      Reply

  2. ben
    August 3, 2021 @ 2:43 pm

    nice way of scraping of the eCommerce sites, thank you for your input, also I would suggest e-scraper .com

    Reply