Research Notes for a e-Commerce Class. How to set up WooCommerce with sample data, fake payment and block based editors.
The Sample data for WooCommerce is located in sample-products.csv or sample-products.xml, which are located in the WooCommerce plugin folder in woocommerce/sample-data/
How to Add Woocommerce Product Sample Data in WooCommerce with Product Images. By: Gomahamaya
How To Add Fake Sample Data To WordPress & WooCommerce. By: WPCrafter.
FakerPress is used in the video above
FakePay for WooCommerce
How to create crafted WooCommerce pages in e.g. Gutenberg and Kadence blocks.
The video has an interesting feature: a functions.php hack that will enable Gutenberg (and other page builders) in WooCommerce. However, the authors tell, that this way of doing things may become deprecated soon.
Edit Products in Gutenberg
Enable Gutenberg
Note: this code could be deprecated soon.
Add this to functions.php:
// enable gutenberg for woocommerce
function activate_gutenberg_product( $can_edit, $post_type ) {
if ( $post_type == 'product' ) {
$can_edit = true;
}
return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );
// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
$args['show_in_rest'] = true;
return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );
WooCoomerce 2023 tutorial
(3 hours tutorial) “… from start to finish how to create a webshop using WordPress and WooCommerce. This eCommerce tutorial is both for people that want to create a fully functional webshop from scratch and for people that want to extend their WordPress website with a webshop.”
These days Bill Gates acts like a renaissance thinker watching the world from a tower. To Gates there is no doubt that AI is the mark of a new age:
“But I think in the next five to 10 years, AI-driven software will finally deliver on the promise of revolutionizing the way people teach and learn. It will know your interests and your learning style so it can tailor content that will keep you engaged. It will measure your understanding, notice when youâre losing interest, and understand what kind of motivation you respond to. It will give immediate feedback.”
“I know a lot of teachers are worried that students are using GPT to write their essays. Educators are already discussing ways to adapt to the new technology, and I suspect those conversations will continue for quite some time. Iâve heard about teachers who have found clever ways to incorporate the technology into their workâlike by allowing students to use GPT to create a first draft that they have to personalize.“
On the contrary. It’s desk research – plain and simple! In order to get a good result you must be able to write a high quality prompt. However, if you use Chat GPT state your source as you would with any source.
Chat GPT: cheat or …?
I just had to try. Is ChatGPT able to program a simlpe gallery in jQuery? Since I need a sample like that for a programming class the anwer could come in handy.
I asked for a gallery of five images. At first each image got a <div> with an image tag inside.
Then I rephrased the prompt, and asked for an array of five images, and got a far better result. The improved prompt was:
“create a jquery script that will create a gallery on a web page from an array with five image names“
A few seconds later the answer was ready. Here is a proof of concept. I copied the code to jsFiddle, however I’ve reduced them number of images to four for aestetic reasons:
Chat GPT seems like a fine resource for programmers. After the code there is a fine explanation, how the thing works. Which is fine if you want to understand the details.
“In this example, we’re using jQuery to create a gallery from an array of image names. We first set up the HTML and CSS to create a container for the gallery.
Then, in the jQuery script, we create an array of image names. We also create the overlay container and an image element to show the full-size image when the user clicks on an image. We append these elements to the body of the document.
We then use the jQuery each() function to loop through the array of image names. For each image, we create a new image container element and set its src attribute to the corresponding image name. We also add a click event handler to each image container element to show the overlay with the full-size image when the user clicks on it.
Finally, we attach a click event handler to the overlay container. When the user clicks on the overlay container, we remove the active class to hide it again.
By adjusting the CSS, you can customize the appearance of the gallery to your liking.” [Code explained by Chat GPT, prompt op.cit.]
The images were added from my experiments with the image AI Stable Diffusion.
Chat GPT and studies
It’s hardly a secret that Chat GPT is a debated subject among teachers and students. According to some journalists you could even pass an exam in Law via Chat GPT.
How does Chat GPT see it’s role in the classroom? I asked and the answer was surprisingly usefull:
“As an AI language model, my purpose is to assist users in generating human-like responses to their inquiries or prompts. However, using me to write essays or school reports without understanding the topic or doing the necessary research may be considered cheating, as it does not reflect the student’s own effort or understanding of the subject matter.
It is essential to keep in mind that while I can provide useful information and suggestions, students should use the information provided by me as a tool to aid them in their research, writing, and learning process. It is always best to use your own words and ideas to showcase your understanding of the subject and demonstrate your skills and knowledge.
Therefore, the use of ChatGPT should be considered as a supplementary tool and not a replacement for personal learning and research.
To use Chat GPT as a research tool or as a starting point makes sense. Today noone would hardly care if Duckduckgo or Google were used during a desk research phase. On the contrary: it’s expected. For programmers Google is a very useful tool.
If you find a good source by search engines they are used as sources and added to the source list, in footnotes and so on. According to academic method Chat GPT is a source among sources. If it’s used for research and inspiration you should mention it in a footnote, e.g. if you’re inspired by the Harward Mehtod in the sources list you could add the source along these lines, [Chat GPY, prompt: “is the use of chat gpt considered cheating for studies or school reports”, 2023 February 25th]
Now the prompt is important, since that’s what give you the answer from Chat GPT. As a coder you should know, that the answer’s quality depend on a combination of your ability to pose the correct question. There is also an element of randomness. If you ask the same question again you will not always get the same answer.
The case with my code for a jQuery above is a good sample. Since I know how to code the first result was not good. However, when my question was rephrased – the answer became more usefull. The quality of the answer depends on the quality of what’s in the prompt.
A clever student will get better answers.
In the future I believe that different AI services will compete. Probably the writing of good prompts will be an essential skill for anyone who works with code or academic research. After all you need to be critical towards anything returned by the Chat GPT prompt. You have to compare and choose the best results. And that’s good old Desk Research …
Fun and easy to use. More usable than Dall E2 because you don’t have to pay and pay.
My only complaint is the apparent all american scare of the human body. Untill now most socalled AI has a moral like an ultra-conservative missionary from the Bible Belt in the US. The images will never leave the scope of “cute’ism”. Which will exclude most major art forms.
Matt Mullenweg’s great and inspiring talk in New York, December 2022. Looking back on the development of WP during 2022 – and some visions for the future.
Just for the Hell of it, let’s try and create a button that will hide/show all <p> tags. Select the button, and give it an id. You can do this in advanced settings. Here the id is removeP.
The code above will detect a click event on the button. We gave the button the id removeP. When a click is detected a new selector will mark all <p> elements and toggle them. A toggle is a bit like a normal on/off switch on the wall. If the elements are visible they will hide away. Or vice versa. The number in the parethesis (777) is the number of microseconds that the toggle animation will last.
Now try to click the button. Does it work as intended?
JavaScript libraries can add cool animations or parallax effects to a traditional webpage in HTML, CSS and JavaScript. Here you can learn how to do the same thing in the WordPress editor.
Case: Animate on Scroll (AOS)
Animate on Scroll is a populer animation library. In order to use the library on a single WP page or post you’ll have to load the CSS and JavaScript. Do this in a custom HTML block looking somewhat like this in the <head> section – or at least before the blocks you want to animate:
The image processing program Dall E2 is very popular these days. In the interface you write a few words, and then a picture will come up. They even suggest that you add style concepts, such as “oil painting” or style.
Now the part of me that is art historian gets curious. Can this AI create Art. That is Art with a capital A. Does the AI really know styles? Let’s give it a spin and see.
A Croquis Model?
One of the standard exercises in the craft of art is croquis model drawing. That is: drawing after a nude model in order to learn the geometry and composition of the human body. How good is AI for this purpose? Can we get a decent croquis model via AI?
Mostly you get a negative answer like this:
So nudity is not allowed. Hence croquis is not permitted in Dall E2.
This will exclude art inspiration from most of the art history from renaissance artists like Leonardo da Vinci (1452 – 1519) and Michelangelo (1475 – 1564) to contemporary art.
And this will also exclude most of the known works from the classical greek and roman art.
Here are some suggestions for croquis in oil paint. These suggestions are not croquis at all:
Above: a gallery with socalled “croquis in oil paint”.
So in the case scenario the AI does not know what it is doing. Leonardo’s drawing of the Vitruvian Man which is based on croquis studies of the geometry of the human body would simply not be permitted in Dall E2 because of the prudish policies of our time – probably based on an irrational angst of the human bodily functions.
Above: Leonardo da Vinci’s “Vitruvian Man”. The renaissance rediscovered the human body and were inspired by the architecture and sculptures of ancient Greece and Roman culture.
So much for croquis. Here the AI fails. But how about the styles of art history? Does the AI have any clues about that?
Art History Styles
If anything should count as artificial intelligence we would asume a keen knowledge of the styles of art history. Here I’ve made experiments with more success, but the knowledge of art styles seems limited to our time – perhaps from the impressionists to pop art.
I’ve made a few excursions here. Let’s see what happens with a few art styles.
Prompt: 16th century tarot card “The Universe”. A decent attempt by Dall E-2, but the style is definitely not like anything 16th century.
Prompt: “Mouse and elephant in surrealist style“. Dall E2 is decent at “surrealist images”. They are more in the grand imitated style from Salvador Dali or Wilhemlm Freddie than the more abstract Miro.
Of course the satirical critique of society, the surrealist focus on freudian inspired libido and erotic images will be totally removed by the censorship of Dall E2. It will just use the outer form of surrealism.
In that sense the output from Dall E2 will never become a real disturbing avant garde critique of society. Surrealism wants to provoke. Dall E2 is an attempt to please.
Prompt: “A mouse and the moon in renaissance style“. A cute image, indeed. But the style is definitely not looking like anything from the renaissance.
“Andy Warhol in Heaven” – well it is close to pop art. Probably Andy could have created some artworks via Dall E2’s AI. However, Andy used to say:
“I want to be a machine.”
Art? Really?
My anwer is definitely no. The pictures from Dall E2 are just pictures.
However, the pictures from Dall E2 could be used by an artist like the dadaist readymades or the odd surrealist object trouve. So here we may perhaps weird connotations from Salvador to Dall E2. In that sense the randomized output from an artistic prompt could be considered art – but only if it is the will of the artist.
First of all the purist approach to the web will block the free expression of artists. The croquis sample falsified Dall E2 as Art because of the limitations inspired by “online moral attitudes”. The artistic expressions are limited to Disney-like bodies that are without any form of gender attributes.
Dall E2’s knowledge of art history styles is very limited. “Oil painting” hardly qualifies as a style. Pixels are not oil paint. So we’re somewhat in a surrealist tradition according to Magritte’s work: Ceci n’est pas une pipe.
I tried several times to see if the AI was able to reproduce something looking like an art style. Surrealism and Pop Art was somewhat decent. However, if you try to get a work in a renaissance, medieval or rokoko style the AI will fail – at least untill the creative forces behind Dall E2 feeds the system with that kind of images and data (which is not the same as knowledge or wisdom).
To me it seems like the programmers have a limited knowledge about art history and styles.
At a certain point I tried to help the AI with rokoko style. Even “manierist style virgin and death” was too much for the artificial “intelligence”.
If you want to create cute, innocent, undangerous, neat pictures that will not offend anybody in any way whatsoever Dall E2 is a nice tool. But don’t even try something like:
“Death of the virgin in gothic style“
Probably the AI does not know, that the gothic style is medieval – like the great cathedrals. And that death of the virgin is a classic motive in christian iconography.
Death of the Virgin in gothic style, from an illuminated medieval manuscript. Dall E2 refused to create such an image. The AI has an extremely limited understanding af art history.
To me it seems like the socalled Dark Ages were far more enlightened than our present day AI.
Conclusion: is this Art?
Dall-e wants to please. The moral of the thing seems like the sick repressed moral you find in bookbanning highschools in midwest USA. Luckily Dall-e is not iconoclasst. Thou shallt not provoke. Never ever show the human body as it is actually made by whatever create them in their image. Especially the things found in the center around the pelvis.
Dall-e’s knowledge of art history is not impressing at all. They steal the name of the great Salvador DalĂ in order to create cute images. But DalĂ wanted to create surrealist paranoiac-critical images. Surrealism was against the facism – and they attaced the norms of the society.
Since Dall-e refuses to show nudity and the knowledge of art history is extremely poor you will never get images that mimic the style of say ancient greece or renaissance art.
So will Dall-e create art, or just images. I my humble oppinion Dall-e will just create images. O course skilled artist can use such images in an art project – when it comes to art the AI will not make artists as long as the balls of art are removed from the mental model. The images from Dall-e are just images and the have absolutely noting to do with art.
But why use such images at all? Well, sometimes such images come in handy. You can use them as long as you do not confuse them with Art.
Art vs. Image
Last attemt let Dall-e mimici DalĂ. Prompt: “create a surrealist image like Salvador Dali that will attack the bourgeois angst of nudity“.
The outer form is there, but why are all the figures castrated? This robot attempt to please is even more creepy than the surrealists ever were.
Do you need to hide or protect content on a web page. Here is a simple, but not 100% secure way to add a log on.
If the images are under copyright you might have a point in keeping the cards somewhat close. Here you can add a .gitignore file (you can choose to ignore a file or folder before you push). In that case you could share the code – but keep the images to yourself.
Then add a log on to the web page. This can be done in JavaScript. Just add an input field, and select a codeword, say “cheesecake”. Now encrypt the word by an online service such as https://www.md5online.org/md5-encrypt.html
Then you’ll get this string: 5ac5355b84894ede056ab81b324c4675
In the CSS add a style that will hide everything. You can do this by hiding the <body> element. You can do this via JavaScript also.
A web app is an application made by web technologies. The web app will run similar to a native app, that is if the user agrees to install the web app on the device. Several WordPress plugins are able to do this.
Creating a web app i WordPress is surprisingly easy. But make sure, that your web solution looks cool on mobile devices during your design. Probably one or more elements will need some CSS tweaks.
Here I don’t recommend page builders such as Elementor, Divi &c.
It’s easy to use and works in most mobile browsers:
Chrome: works like a charm. You’ll get a “want to install” message. That’s it.
AdBlock: you have to install the app manually. However, that’s what we’d expect from this browser, isn’t it?
Push Notifications
Here you have to add a plugin to the plugin. After that create a user profile. Add the token to the PWA plugin. Now pushing should be possible. That is in theory.
When I run the browser version, I’m asked whether notifications are ok. Just answer yeah here. Below: the plugin for push notifications.
Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.
