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?

2 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

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

We use cookies

We use cookies for various things on our site, including our on-site chat bubble (if you use it), our comment forms (if you use them) and for session handling (if you log in).

Other than that, we use cookies to identify where traffic came from to help us understand which traffic turns into sales, we use a cookie for Google Analytics traffic analysis and we use a cookie to customise adverts for our own products we think you'll be interested in.

You can read more detail in our privacy policy page. Please click 'Accept' or 'Decline' to continue.